rocket-preset-custom-elements-manifest
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.11 • Public • Published

    rocket-preset-custom-elements-manifest

    Documents code generation for JavaScript libraries, particularly custom elements.

    Configuration

    Add the preset to your rocket.config.js, and configure it with a collections object. collections is a record of collection names to tab types. For example, if you want code tabs which switch between install commands for npm, yarn, and pnpm, add the following:

    import { customElementsManifest } from 'rocket-preset-custom-elements-manifest';
    
    export default {
      presets: [
        customElementsManifest()
      ]
    }

    Options

    Option Type Description Default
    typeLinks object Object mapping from type name to URL
    typeLinksNewTab boolean Whether to open type links in a new tab
    root string Absolute path to glob from The path above the node_modules dir the preset is in
    package string relative path (with or without leading ./) to a single package.json file. Takes precedence over packages
    packages string glob pattern for multiple package.json files 'packages/*/package.json'
    imports object Options for rendering imports { keepExtension: false }

    Usage

    Because every package is different, this preset does not create docs pages for you, but it does fill the docs pages you create with API documentation.

    Documenting packages

    API pages document package indexes or their modules. To add a page to your documentation, create a markdown file with the layout-api or layou-api-index layout, a package field, and a module or modules field

    docs/api/my/index.md

    ---
    layout: layout-api-index
    package: '@my/custom-element'
    module: index.js
    ---
    
    # Custom Elements Manifest
    
    This page documents the `index.js` file in `@my/custom-element`

    docs/api/my/custom-element/index.md

    ---
    layout: layout-api
    package: '@my/custom-element'
    module: custom-element.js
    ---
    
    # Custom Elements Manifest >> custom-element
    
    This page documents the `custom-element.js` file in `@my/custom-element`

    Type Links

    If your custom-elements manifest contains type information, and you'd like to link particular types to other pages, pass the typeLinks option to the preset. All instances of the keys of the passed object found in type strings will get wrapped in links to the value for that key. For example, to link HTMLElement to MDN and WickedGoodBaseClass to a local docs page, and to have those links open in a new tab, use the following config:

    import { customElementsManifest } from 'rocket-preset-custom-elements-manifest';
    
    export default {
      presets: [
        customElementsManifest({
          typeLinksNewTab: true,
          typeLinks: {
            HTMLElement: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement',
            WickedGoodBaseClass: '/api/lib/base-class/',
          }
        })
      ]
    }

    Results

    With JavaScript enabled, users will be able to pick their preferred 'flavour', which persists across page loads via local storage.

    Example showing docs for "custom-element"

    <noscript>

    Content is king! Users with JavaScript disabled get a gracefully degraded experience

    Example showing noscript docs for "custom-element"

    Styling

    Enjoy consistent site-wide theming by setting --markdown-syntax-background-color and --markdown-table-row-odd-background-color

    API Docs

    custom-elements-manifest.js:

    Functions

    Name Description Parameters Return
    customElementsManifest options: Options & CEMOptions Partial<RocketPreset>

    Exports

    Kind Name Declaration Module Package
    js customElementsManifest customElementsManifest custom-elements-manifest.js

    eleventy/custom-elements-manifest.js:

    Functions

    Name Description Parameters Return
    customElementsManifestPlugin eleventyConfig: *, options: CEMOptions

    Exports

    Kind Name Declaration Module Package
    js customElementsManifestPlugin customElementsManifestPlugin eleventy/custom-elements-manifest.js

    eleventy/filters.js:

    Variables

    Name Description Type
    getAllFields
    getAllMethods
    getFields
    getMethods
    getPrivateFields
    getPrivateMethods

    Functions

    Name Description Parameters Return
    isPrivate x
    split x, d
    filterMembersBy p
    getDeclaration moduleData, declaration
    getExports m
    getAttributes declaration
    getCssProperties declaration
    getCssParts declaration
    getSlots declaration
    getEvents declaration
    getGitHubURL { repository: { url = '', directory = '' } = {} }
    getHeadings module
    sortByProp list, prop
    sortClassMembers Sort a list of custom-element.json ClassMembers list: ClassMember[] ClassMember[]
    nonContent Get the non-content blocks from a _joiningBlocks directory blocks: Record<string, string> Record<string, string>
    manifestModuleImports eleventyConfig, configOptions
    getTypeString input: string|Type string

    Exports

    Kind Name Declaration Module Package
    js isPrivate isPrivate eleventy/filters.js
    js split split eleventy/filters.js
    js filterMembersBy filterMembersBy eleventy/filters.js
    js getDeclaration getDeclaration eleventy/filters.js
    js getAllFields getAllFields eleventy/filters.js
    js getAllMethods getAllMethods eleventy/filters.js
    js getFields getFields eleventy/filters.js
    js getMethods getMethods eleventy/filters.js
    js getPrivateFields getPrivateFields eleventy/filters.js
    js getPrivateMethods getPrivateMethods eleventy/filters.js
    js getExports getExports eleventy/filters.js
    js getAttributes getAttributes eleventy/filters.js
    js getCssProperties getCssProperties eleventy/filters.js
    js getCssParts getCssParts eleventy/filters.js
    js getSlots getSlots eleventy/filters.js
    js getEvents getEvents eleventy/filters.js
    js getGitHubURL getGitHubURL eleventy/filters.js
    js getHeadings getHeadings eleventy/filters.js
    js sortByProp sortByProp eleventy/filters.js
    js sortClassMembers sortClassMembers eleventy/filters.js
    js nonContent nonContent eleventy/filters.js
    js manifestModuleImports manifestModuleImports eleventy/filters.js
    js getTypeString getTypeString eleventy/filters.js

    eleventy/linkToTypes.js:

    Functions

    Name Description Parameters Return
    linkToTypes options

    Exports

    Kind Name Declaration Module Package
    js linkToTypes linkToTypes eleventy/linkToTypes.js

    eleventy/prettyJson.js:

    Functions

    Name Description Parameters Return
    prettyJson content

    Exports

    Kind Name Declaration Module Package
    js prettyJson prettyJson eleventy/prettyJson.js

    components/css-value-doc/css-value-doc.ts:

    class: CssValueDoc

    Superclass
    Name Module Package
    LitElement lit
    Static Fields
    Name Privacy Type Default Description Inherited From
    styles array [style]
    Fields
    Name Privacy Type Default Description Inherited From
    emptyBody boolean false
    color string
    mo new MutationObserver(() => this.onMutation())
    Methods
    Name Privacy Description Parameters Return Inherited From
    render TemplateResult
    onMutation void

    Exports

    Kind Name Declaration Module Package
    js CssValueDoc CssValueDoc components/css-value-doc/css-value-doc.ts

    components/type-doc/type-doc.ts:

    class: TypeDoc

    Superclass
    Name Module Package
    LitElement lit
    Static Fields
    Name Privacy Type Default Description Inherited From
    styles array [style]
    Fields
    Name Privacy Type Default Description Inherited From
    expanded boolean false
    emptyBody boolean false
    Methods
    Name Privacy Description Parameters Return Inherited From
    render TemplateResult
    firstUpdated void
    CSS Properties
    Name Default Description
    --type-doc-header-background var(--markdown-table-row-odd-background-color, #f6f8fa) background colour for type doc headers
    --type-doc-background var(--markdown-syntax-background-color) type doc body background
    --type-doc-header-font-family font family for headers
    Private API
    Methods
    Name Privacy Description Parameters Return Inherited From
    cloneHeading private
    toggleInherited private

    Exports

    Kind Name Declaration Module Package
    js TypeDoc TypeDoc components/type-doc/type-doc.ts

    Install

    npm i rocket-preset-custom-elements-manifest

    DownloadsWeekly Downloads

    7

    Version

    0.1.11

    License

    MIT

    Unpacked Size

    1.09 MB

    Total Files

    59

    Last publish

    Collaborators

    • bennyp