@htmlplus/element 0.8.6 → 1.1.0

package/{compiler → transformer}/plugins/customElement.js

@@ -14,15 +14,16 @@ export const customElement = (options) => {
     const run = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
         // TODO
-        const tag = ((options === null || options === void 0 ? void 0 : options.prefix) || '') + context.componentKey;
-        const componentInterfaceName = `HTML${pascalCase(tag)}Element`;
+        context.elementTagName = `${options.prefix || ''}${context.elementKey}`;
+        // TODO
+        context.elementInterfaceName = `HTML${pascalCase(context.elementTagName)}Element`;
         // attaches name
         visitor(ast, {
             ClassDeclaration(path) {
                 const { body, id } = path.node;
                 if (id.name != context.className)
                     return;
-                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(tag), undefined, undefined, undefined, true);
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(context.elementTagName), undefined, undefined, undefined, true);
                 t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
                 body.body.unshift(node);
             }
@@ -273,7 +274,7 @@ export const customElement = (options) => {
             }
         });
         // attaches typings
-        if (options === null || options === void 0 ? void 0 : options.typings) {
+        if (options.typings) {
             visitor(ast, {
                 Program(path) {
                     const attributes = context.classProperties.map((property) => {
@@ -312,6 +313,7 @@ export const customElement = (options) => {
                             leadingComments: t.cloneNode(property, true).leadingComments
                         });
                     });
+                    // prettier-ignore
                     const ast = template.default.ast(`
               export interface ${context.className}Attributes {
                 ${attributes.map(print).join('')}
@@ -332,27 +334,27 @@ export const customElement = (options) => {
               export interface ${context.className}JSX extends ${context.className}Events, ${context.className}Properties { }
     
               declare global {
-                interface ${componentInterfaceName} extends HTMLElement, ${context.className}Methods, ${context.className}Properties { }
+                interface ${context.elementInterfaceName} extends HTMLElement, ${context.className}Methods, ${context.className}Properties { }
 
-                var ${componentInterfaceName}: {
-                  prototype: ${componentInterfaceName};
-                  new (): ${componentInterfaceName};
+                var ${context.elementInterfaceName}: {
+                  prototype: ${context.elementInterfaceName};
+                  new (): ${context.elementInterfaceName};
                 };
 
                 interface HTMLElementTagNameMap {
-                  "${tag}": ${componentInterfaceName};
+                  "${context.elementTagName}": ${context.elementInterfaceName};
                 }
                 
                 namespace JSX {
                   interface IntrinsicElements {
-                    "${tag}": ${context.className}Events & ${context.className}Attributes & {
+                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & {
                       [key: string]: any;
                     };
                   }
                 }
               }
 
-              export type ${context.className}Element = globalThis.${componentInterfaceName}
+              export type ${context.className}Element = globalThis.${context.elementInterfaceName}
             `, {
                         plugins: ['typescript'],
                         preserveComments: true
@@ -361,7 +363,6 @@ export const customElement = (options) => {
                 }
             });
         }
-        // TODO
         context.script = print(ast);
     };
     return { name, run };

package/{compiler → transformer}/plugins/customElementReact/customElementReact.d.ts

@@ -1,16 +1,16 @@
-import { Context, Plugin } from '../../../types';
+import { TransformerPlugin, TransformerPluginContext } from '../../transformer.types';
 export declare const CUSTOM_ELEMENT_REACT_OPTIONS: Partial<CustomElementReactOptions>;
 export interface CustomElementReactOptions {
     compact?: boolean;
     destination: string;
     eventName?: (eventName: string) => string;
-    importerComponent: (context: Context) => {
+    importerElement: (context: TransformerPluginContext) => {
         source: string;
     };
-    importerComponentType: (context: Context) => {
+    importerElementType: (context: TransformerPluginContext) => {
         source: string;
         imported: string;
         local: string;
     };
 }
-export declare const customElementReact: (options: CustomElementReactOptions) => Plugin;
+export declare const customElementReact: (options: CustomElementReactOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/customElementReact/customElementReact.js

@@ -13,7 +13,7 @@ export const customElementReact = (options) => {
         const config = { cwd: __dirname(import.meta.url) };
         const isEmpty = isDirectoryEmpty(options.destination);
         const skip = [];
-        const getKey = (component) => component.className;
+        const getKey = (element) => element.className;
         for (const key in globalNew.contexts) {
             const context = globalNew.contexts[key];
             const classEvents = context.classEvents.map((classEvent) => {
@@ -24,12 +24,12 @@ export const customElementReact = (options) => {
                     to });
             });
             const fileName = context.fileName;
-            const importerComponent = options.importerComponent(context);
-            const importerComponentType = options.importerComponentType(context);
+            const importerElement = options.importerElement(context);
+            const importerElementType = options.importerElementType(context);
             const state = Object.assign(Object.assign({}, context), { classEvents,
                 fileName,
-                importerComponent,
-                importerComponentType,
+                importerElement,
+                importerElementType,
                 options });
             const patterns = [
                 'templates/src/components/*fileName*.ts.hbs',
@@ -40,27 +40,27 @@ export const customElementReact = (options) => {
         if (options.compact) {
             globalNew.groups = Object.values(globalNew.contexts)
                 .sort((a, b) => getKey(b).length - getKey(a).length)
-                .map((component, index, components) => ({
-                key: getKey(component),
-                components: components.filter((current) => getKey(current).startsWith(getKey(component)))
+                .map((element, index, elements) => ({
+                key: getKey(element),
+                elements: elements.filter((current) => getKey(current).startsWith(getKey(element)))
             }))
-                .sort((a, b) => b.components.length - a.components.length)
+                .sort((a, b) => b.elements.length - a.elements.length)
                 .filter((group) => {
                 if (skip.includes(group.key))
                     return;
-                group.components.forEach((component) => skip.push(getKey(component)));
+                group.elements.forEach((element) => skip.push(getKey(element)));
                 return true;
             })
                 .map((group) => {
-                const all = group.components
+                const all = group.elements
                     .reverse()
-                    .map((component, index) => {
-                    const componentClassNameInCategory = getKey(component).replace(group.key, '');
-                    const importerComponent = options.importerComponent(component);
-                    const importerComponentType = options.importerComponentType(component);
-                    return Object.assign(Object.assign({}, component), { componentClassNameInCategory,
-                        importerComponent,
-                        importerComponentType });
+                    .map((element, index) => {
+                    const elementClassNameInCategory = getKey(element).replace(group.key, '');
+                    const importerElement = options.importerElement(element);
+                    const importerElementType = options.importerElementType(element);
+                    return Object.assign(Object.assign({}, element), { elementClassNameInCategory,
+                        importerElement,
+                        importerElementType });
                 })
                     // TODO: experimental
                     .sort((a, b) => (getKey(b) < getKey(a) ? 0 : -1));

package/{compiler → transformer}/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -10,7 +10,7 @@ const All = Object.assign(
   {{root.className}},
   {
     {{#each filterd}}
-    {{componentClassNameInCategory}}: {{className}},
+    {{elementClassNameInCategory}}: {{className}},
     {{/each}}
   }
 );

package/{compiler → transformer}/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs

@@ -1,14 +1,14 @@
 /**************************************************
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
  **************************************************/
-import { {{className}} as {{className}}Core } from '{{importerComponent.source}}';
-import type { {{className}}Element, {{importerComponentType.imported}} as {{importerComponentType.local}} } from '{{importerComponentType.source}}';
+import { {{className}} as {{className}}Core } from '{{importerElement.source}}';
+import type { {{className}}Element, {{importerElementType.imported}} as {{importerElementType.local}} } from '{{importerElementType.source}}';
 
 import { proxy } from '../proxy';
 import type { Rename } from '../proxy';
 
 type Renamed = Rename<
-  {{importerComponentType.local}},
+  {{importerElementType.local}},
   {
     {{#each classEvents}}
     {{from}}: '{{to}}';

package/transformer/plugins/customElementReact/templates/src/index.ts.hbs

@@ -0,0 +1 @@
+export * from './elements';

package/transformer/plugins/document.d.ts

@@ -0,0 +1,7 @@
+import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
+export declare const DOCUMENT_OPTIONS: Partial<DocumentOptions>;
+export interface DocumentOptions {
+    destination: string;
+    transformer?: (context: TransformerPluginContext, element: any) => any;
+}
+export declare const document: (options?: DocumentOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/document.js

@@ -2,15 +2,18 @@ import { capitalCase, kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import glob from 'glob';
 import path from 'path';
+import * as CONSTANTS from '../../constants/index.js';
 import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
-export const DOCUMENT_OPTIONS = {};
+export const DOCUMENT_OPTIONS = {
+    destination: path.join('dist', 'document.json')
+};
 export const document = (options) => {
     const name = 'document';
     options = Object.assign({}, DOCUMENT_OPTIONS, options);
     const finish = (global) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const json = {
-            components: []
+            elements: []
         };
         for (const context of global.contexts) {
             const deprecated = hasTag(context.class, 'deprecated');
@@ -62,7 +65,7 @@ export const document = (options) => {
             const group = (_b = getTag(context.class, 'group')) === null || _b === void 0 ? void 0 : _b.value;
             const lastModified = glob
                 .sync('**/*.*', { cwd: context.directoryPath })
-                .map((file) => fs.statSync(path.resolve(context.directoryPath, file)).mtime)
+                .map((file) => fs.statSync(path.join(context.directoryPath, file)).mtime)
                 .sort((a, b) => (a > b ? 1 : -1))
                 .pop();
             const methods = context.classMethods.map((method) => {
@@ -178,16 +181,13 @@ export const document = (options) => {
                     return [];
                 return fs
                     .readFileSync(context.stylePath, 'utf8')
-                    .split('@prop')
+                    .split(CONSTANTS.CSS_DECORATOR_PROPERTY)
                     .slice(1)
                     .map((section) => {
-                    var _a;
-                    let [description, name] = section.split(/\n/);
-                    name = name.split(':').slice(0, -1).join(':').trim();
-                    description = description.trim();
-                    let [initializer] = ((_a = context.styleParsed) === null || _a === void 0 ? void 0 : _a.split(name).slice(1, 2)) || [];
-                    if (initializer)
-                        initializer = initializer.split(/;|}/)[0].replace(':', '').trim();
+                    const [first, second] = section.split(/\n/);
+                    const description = first.replace('*/', '').trim();
+                    const name = second.split(':')[0].trim();
+                    const initializer = second.split(':').slice(1).join(':').replace(';', '').trim();
                     return {
                         description,
                         initializer,
@@ -196,14 +196,14 @@ export const document = (options) => {
                 });
             })();
             const tags = getTags(context.class).filter((tag) => !['part', 'slot'].includes(tag.key));
-            const title = capitalCase(context.componentKey);
-            const component = {
+            const title = capitalCase(context.elementKey);
+            const element = {
                 events,
                 group,
                 deprecated,
                 description,
                 experimental,
-                key: context.componentKey,
+                key: context.elementKey,
                 lastModified,
                 methods,
                 parts,
@@ -214,10 +214,10 @@ export const document = (options) => {
                 tags,
                 title
             };
-            const transformed = ((_c = options.transformer) === null || _c === void 0 ? void 0 : _c.call(options, context, component)) || component;
-            json.components.push(transformed);
+            const transformed = ((_d = (_c = options).transformer) === null || _d === void 0 ? void 0 : _d.call(_c, context, element)) || element;
+            json.elements.push(transformed);
         }
-        json.components = json.components.sort((a, b) => (a.title > b.title ? 1 : -1));
+        json.elements = json.elements.sort((a, b) => (a.title > b.title ? 1 : -1));
         const dirname = path.dirname(options.destination);
         fs.ensureDirSync(dirname);
         fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });

package/transformer/plugins/extract.d.ts

@@ -0,0 +1,2 @@
+import { TransformerPlugin } from '../transformer.types';
+export declare const extract: () => TransformerPlugin;

package/{compiler → transformer}/plugins/extract.js

@@ -1,6 +1,5 @@
 import t from '@babel/types';
 import { kebabCase } from 'change-case';
-import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
 export const extract = () => {
@@ -19,26 +18,10 @@ export const extract = () => {
                     }
                     path.skip();
                 }
-            },
-            JSXElement(path) {
-                var _a;
-                const { openingElement } = path.node;
-                const name = openingElement.name.name;
-                if (!/-/g.test(name))
-                    return;
-                (_a = context.customElementNames) !== null && _a !== void 0 ? _a : (context.customElementNames = []);
-                context.customElementNames.push(name);
-                context.customElementNames = context.customElementNames
-                    .filter((item, index, items) => items.indexOf(item) === index)
-                    .sort();
             }
         });
-        context.directoryPath = path.dirname(context.filePath);
-        context.directoryName = path.basename(context.directoryPath);
-        context.fileExtension = path.extname(context.filePath);
-        context.fileName = path.basename(context.filePath, context.fileExtension);
         context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
-        context.componentKey = kebabCase(context.className);
+        context.elementKey = kebabCase(context.className || '');
         context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
         context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
         context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));

package/transformer/plugins/parse.d.ts

@@ -0,0 +1,6 @@
+import { ParserOptions } from '@babel/parser';
+import { TransformerPlugin } from '../transformer.types';
+export declare const PARSE_OPTIONS: Partial<ParseOptions>;
+export interface ParseOptions extends ParserOptions {
+}
+export declare const parse: (options?: ParseOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/parse.js

@@ -8,7 +8,7 @@ export const parse = (options) => {
     options = Object.assign({}, PARSE_OPTIONS, options);
     const run = (context) => {
         var _a;
-        context.fileAST = (_a = context.fileAST) !== null && _a !== void 0 ? _a : parser(context.fileContent, options);
+        (_a = context.fileAST) !== null && _a !== void 0 ? _a : (context.fileAST = parser(context.fileContent, options));
     };
     return { name, run };
 };

package/transformer/plugins/read.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="node" />
+import { TransformerPlugin } from '../transformer.types';
+export declare const READ_OPTIONS: Partial<ReadOptions>;
+export interface ReadOptions {
+    encoding: BufferEncoding;
+    flag?: string | undefined;
+}
+export declare const read: (options?: ReadOptions) => TransformerPlugin;

package/transformer/plugins/read.js

@@ -0,0 +1,20 @@
+import fs from 'fs-extra';
+import path from 'path';
+export const READ_OPTIONS = {
+    encoding: 'utf8'
+};
+export const read = (options) => {
+    const name = 'read';
+    options = Object.assign({}, READ_OPTIONS, options);
+    const run = (context) => {
+        var _a;
+        if (!context.filePath)
+            return;
+        (_a = context.fileContent) !== null && _a !== void 0 ? _a : (context.fileContent = fs.readFileSync(context.filePath, options));
+        context.fileExtension = path.extname(context.filePath);
+        context.fileName = path.basename(context.filePath, context.fileExtension);
+        context.directoryPath = path.dirname(context.filePath);
+        context.directoryName = path.basename(context.directoryPath);
+    };
+    return { name, run };
+};

package/transformer/plugins/readme.d.ts

@@ -0,0 +1,6 @@
+import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
+export declare const README_OPTIONS: Partial<ReadmeOptions>;
+export interface ReadmeOptions {
+    source?: (context: TransformerPluginContext) => string;
+}
+export declare const readme: (options?: ReadmeOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/readme.js

@@ -9,14 +9,15 @@ export const readme = (options) => {
     const name = 'readme';
     options = Object.assign({}, README_OPTIONS, options);
     const finish = (global) => {
-        var _a;
         for (const context of global.contexts) {
-            context.readmePath = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
+            context.readmePath = options.source(context);
             if (!context.readmePath)
                 continue;
             if (!fs.existsSync(context.readmePath))
                 continue;
             context.readmeContent = fs.readFileSync(context.readmePath, 'utf8');
+            context.readmeExtension = path.extname(context.readmePath);
+            context.readmeName = path.basename(context.readmePath, context.readmeExtension);
         }
     };
     return { name, finish };

package/transformer/plugins/style.d.ts

@@ -0,0 +1,6 @@
+import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
+export declare const STYLE_OPTIONS: Partial<StyleOptions>;
+export interface StyleOptions {
+    source?: (context: TransformerPluginContext) => string | string[];
+}
+export declare const style: (options?: StyleOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/style.js

@@ -18,8 +18,7 @@ export const style = (options) => {
     const name = 'style';
     options = Object.assign({}, STYLE_OPTIONS, options);
     const run = (context) => {
-        var _a;
-        const sources = [(_a = options === null || options === void 0 ? void 0 : options.source) === null || _a === void 0 ? void 0 : _a.call(options, context)].flat();
+        const sources = [options.source(context)].flat();
         for (const source of sources) {
             if (!source)
                 continue;
@@ -30,6 +29,9 @@ export const style = (options) => {
         }
         if (!context.stylePath)
             return;
+        context.styleContent = fs.readFileSync(context.stylePath, 'utf8');
+        context.styleExtension = path.extname(context.stylePath);
+        context.styleName = path.basename(context.stylePath, context.styleExtension);
         const { local } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED, undefined, true);
         // TODO: remove 'local!'
         const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);

package/transformer/plugins/validate.d.ts

@@ -0,0 +1,2 @@
+import { TransformerPlugin } from '../transformer.types';
+export declare const validate: () => TransformerPlugin;

package/transformer/plugins/validate.js

@@ -0,0 +1,41 @@
+import t from '@babel/types';
+import * as CONSTANTS from '../../constants/index.js';
+import { visitor } from '../utils/index.js';
+export const validate = () => {
+    const name = 'validate';
+    const run = (context) => {
+        context.skipped = true;
+        visitor(context.fileAST, {
+            ImportDeclaration(path) {
+                var _a;
+                if (((_a = path.node.source) === null || _a === void 0 ? void 0 : _a.value) !== CONSTANTS.PACKAGE_NAME)
+                    return;
+                for (const specifier of path.node.specifiers) {
+                    if (specifier.imported.name !== CONSTANTS.DECORATOR_ELEMENT)
+                        continue;
+                    const binding = path.scope.getBinding(specifier.imported.name);
+                    if (binding.references == 0)
+                        break;
+                    const referencePaths = binding.referencePaths.filter((referencePath) => {
+                        if (t.isCallExpression(referencePath.parent) &&
+                            t.isDecorator(referencePath.parentPath.parent) &&
+                            t.isClassDeclaration(referencePath.parentPath.parentPath.parent) &&
+                            t.isExportNamedDeclaration(referencePath.parentPath.parentPath.parentPath.parent))
+                            return true;
+                    });
+                    if (referencePaths.length > 1) {
+                        throw new Error('In each file, only one custom element can be defined. \n' +
+                            'If more than one @Element() decorator is used in the file, it will result in an error.\n');
+                    }
+                    context.skipped = false;
+                    if (referencePaths.length == 1)
+                        break;
+                    throw new Error('It appears that the class annotated with the @Element() decorator is not being exported correctly.');
+                }
+                path.stop();
+            }
+        });
+        context.skipped;
+    };
+    return { name, run };
+};

package/transformer/plugins/visualStudioCode.d.ts

@@ -0,0 +1,8 @@
+import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
+export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
+export interface VisualStudioCodeOptions {
+    destination?: string;
+    reference?: (context: TransformerPluginContext) => string;
+    transformer?: (context: TransformerPluginContext, element: any) => any;
+}
+export declare const visualStudioCode: (options?: VisualStudioCodeOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/visualStudioCode.js

@@ -2,14 +2,16 @@ import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
 import { getTags, getType, print } from '../utils/index.js';
-export const VISUAL_STUDIO_CODE_OPTIONS = {};
+export const VISUAL_STUDIO_CODE_OPTIONS = {
+    destination: path.join('dist', 'visual-studio-code.json')
+};
 export const visualStudioCode = (options) => {
     const name = 'visualStudioCode';
     options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
     const finish = (global) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const contexts = global.contexts.sort((a, b) => {
-            return a.componentKey.toUpperCase() > b.componentKey.toUpperCase() ? +1 : -1;
+            return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
         });
         const json = {
             $schema: 'TODO',
@@ -19,23 +21,23 @@ export const visualStudioCode = (options) => {
         for (const context of contexts) {
             const description = (_a = getTags(context.class).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
             const tag = {
-                name: context.componentKey,
+                name: context.elementKey,
                 description: description,
                 attributes: [],
                 references: [
                     {
                         name: 'Source code',
-                        url: (_b = options.reference) === null || _b === void 0 ? void 0 : _b.call(options, context)
+                        url: (_c = (_b = options).reference) === null || _c === void 0 ? void 0 : _c.call(_b, context)
                     }
                 ]
             };
             for (const property of context.classProperties || []) {
                 const attribute = {
                     name: kebabCase(property.key['name']),
-                    description: (_c = getTags(property).find((tag) => !tag.key)) === null || _c === void 0 ? void 0 : _c.value,
+                    description: (_d = getTags(property).find((tag) => !tag.key)) === null || _d === void 0 ? void 0 : _d.value,
                     values: []
                 };
-                const type = print(getType(context.directoryPath, context.fileAST, (_d = property.typeAnnotation) === null || _d === void 0 ? void 0 : _d['typeAnnotation']));
+                const type = print(getType(context.directoryPath, context.fileAST, (_e = property.typeAnnotation) === null || _e === void 0 ? void 0 : _e['typeAnnotation']));
                 const sections = type.split('|');
                 for (const section of sections) {
                     const trimmed = section.trim();
@@ -64,7 +66,7 @@ export const visualStudioCode = (options) => {
                 }
                 tag.attributes.push(attribute);
             }
-            const transformed = ((_e = options.transformer) === null || _e === void 0 ? void 0 : _e.call(options, context, tag)) || tag;
+            const transformed = ((_g = (_f = options).transformer) === null || _g === void 0 ? void 0 : _g.call(_f, context, tag)) || tag;
             json.tags.push(transformed);
         }
         const dirname = path.dirname(options.destination);

package/transformer/plugins/webTypes.d.ts

@@ -0,0 +1,10 @@
+import { TransformerPlugin, TransformerPluginContext } from '../transformer.types';
+export declare const WEB_TYPES_OPTIONS: Partial<WebTypesOptions>;
+export interface WebTypesOptions {
+    destination?: string;
+    packageName?: string;
+    packageVersion?: string;
+    reference?: (context: TransformerPluginContext) => string;
+    transformer?: (context: TransformerPluginContext, element: any) => any;
+}
+export declare const webTypes: (options?: WebTypesOptions) => TransformerPlugin;

package/{compiler → transformer}/plugins/webTypes.js

@@ -2,14 +2,18 @@ import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
 import { getInitializer, getTags, getType, hasTag, parseTag, print } from '../utils/index.js';
-export const WEB_TYPES_OPTIONS = {};
+export const WEB_TYPES_OPTIONS = {
+    destination: path.join('dist', 'web-types.json'),
+    packageName: '',
+    packageVersion: ''
+};
 export const webTypes = (options) => {
     const name = 'webTypes';
     options = Object.assign({}, WEB_TYPES_OPTIONS, options);
     const finish = (global) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const contexts = global.contexts.sort((a, b) => {
-            return a.componentKey.toUpperCase() > b.componentKey.toUpperCase() ? +1 : -1;
+            return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
         });
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
@@ -69,10 +73,10 @@ export const webTypes = (options) => {
                     description
                 };
             });
-            const component = {
-                'name': context.componentKey,
+            const element = {
+                'name': context.elementKey,
                 'description': description,
-                'doc-url': (_f = options.reference) === null || _f === void 0 ? void 0 : _f.call(options, context),
+                'doc-url': (_g = (_f = options).reference) === null || _g === void 0 ? void 0 : _g.call(_f, context),
                 'deprecated': hasTag(context.class, 'deprecated'),
                 'experimental': hasTag(context.class, 'experimental'),
                 'js': {
@@ -82,7 +86,7 @@ export const webTypes = (options) => {
                 attributes,
                 slots
             };
-            const transformed = ((_g = options.transformer) === null || _g === void 0 ? void 0 : _g.call(options, context, component)) || component;
+            const transformed = ((_j = (_h = options).transformer) === null || _j === void 0 ? void 0 : _j.call(_h, context, element)) || element;
             json.contributions.html.elements.push(transformed);
         }
         const dirname = path.dirname(options.destination);

package/transformer/transformer.d.ts

@@ -0,0 +1,6 @@
+import { TransformerPlugin, TransformerPluginContext } from './transformer.types';
+export declare const transformer: (...plugins: TransformerPlugin[]) => {
+    start: () => Promise<void>;
+    run: (filePath: string) => Promise<TransformerPluginContext>;
+    finish: () => Promise<void>;
+};