@htmlplus/element 0.2.0 → 0.3.2

package/{dist/compiler/plugins/react.proxy/react.proxy.js → compiler/plugins/customElementReact/customElementReact.js}

@@ -10,17 +10,21 @@ const defaults = {
         return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
     }
 };
-export const reactProxy = (options) => {
-    const name = 'react-proxy';
+export const customElementReact = (options) => {
+    const name = 'customElementReact';
     const finish = (global) => {
         options = Object.assign(Object.assign({}, defaults), options);
-        global = Object.assign(Object.assign({}, global), { options });
+        // TODO
+        const globalNew = {
+            contexts: global.contexts.reduce((previous, current) => (Object.assign(Object.assign({}, previous), { [current.filePath]: current })), {}),
+            options
+        };
         const config = { cwd: __dirname(import.meta.url) };
         const isEmpty = isDirectoryEmpty(options.dist);
         const skip = [];
         const getKey = (component) => component.componentClassName;
-        for (const key in global.contexts) {
-            const context = global.contexts[key];
+        for (const key in globalNew.contexts) {
+            const context = globalNew.contexts[key];
             const parse = (input) => {
                 const [source, key] = input.split('#');
                 const [root, ...sub] = key.split('.');
@@ -51,7 +55,7 @@ export const reactProxy = (options) => {
             renderTemplate(patterns, options.dist, config)(state);
         }
         if (options.compact) {
-            global.groups = Object.values(global.contexts)
+            globalNew.groups = Object.values(globalNew.contexts)
                 .sort((a, b) => getKey(b).length - getKey(a).length)
                 .map((component, index, components) => ({
                 key: getKey(component),
@@ -93,7 +97,7 @@ export const reactProxy = (options) => {
                 };
             })
                 .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
-            for (const group of global.groups) {
+            for (const group of globalNew.groups) {
                 if (group.single)
                     continue;
                 const state = Object.assign({ fileName: group.root.fileName, options }, group);
@@ -107,11 +111,11 @@ export const reactProxy = (options) => {
                 '!templates/src/components/*fileName*.ts.hbs',
                 '!templates/src/components/*fileName*.compact.ts.hbs'
             ];
-            renderTemplate(patterns, options.dist, config)(global);
+            renderTemplate(patterns, options.dist, config)(globalNew);
         }
         if (!isEmpty) {
             const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
-            renderTemplate(patterns, options.dist, config)(global);
+            renderTemplate(patterns, options.dist, config)(globalNew);
         }
     };
     return {

package/compiler/plugins/customElementReact/index.d.ts

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

package/compiler/plugins/customElementReact/index.js

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

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

@@ -1,8 +1,7 @@
 import * as t from '@babel/types';
 import { pascalCase, paramCase } from 'change-case';
-import fs from 'fs';
 import path from 'path';
-import * as CONSTANTS from '../../configs/constants.js';
+import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
 export const extract = (options) => {
     const name = 'extract';
@@ -56,12 +55,6 @@ export const extract = (options) => {
         // const fileName                     = "dialogBodyNew";           [OK]
         // const className                    = "DialogBody1";             [OK]
         // const category                     = "Dialog";                  [RAW]
-        (() => {
-            const stylePath = path.join(context.directoryPath, `${context.fileName}.scss`);
-            if (!fs.existsSync(stylePath))
-                return;
-            context.stylePath = stylePath;
-        })();
         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/compiler/plugins/index.d.ts

@@ -0,0 +1,7 @@
+export * from './customElementReact/index.js';
+export * from './customElement.js';
+export * from './extract.js';
+export * from './parse.js';
+export * from './read.js';
+export * from './style.js';
+export * from './validate.js';

package/compiler/plugins/index.js

@@ -0,0 +1,7 @@
+export * from './customElementReact/index.js';
+export * from './customElement.js';
+export * from './extract.js';
+export * from './parse.js';
+export * from './read.js';
+export * from './style.js';
+export * from './validate.js';

package/compiler/plugins/style.d.ts

@@ -0,0 +1,10 @@
+import { Context } from '../../types/index.js';
+export declare type StyleOptions = {
+    extensions?: Array<string>;
+    directory?: (context: Context) => string;
+    filename?: (context: Context) => string;
+};
+export declare const style: (options: StyleOptions) => {
+    name: string;
+    next: (context: Context) => void;
+};

package/compiler/plugins/style.js

@@ -0,0 +1,36 @@
+import t from '@babel/types';
+import fs from 'fs';
+import path from 'path';
+import * as CONSTANTS from '../../constants/index.js';
+const defaults = {
+    extensions: ['scss', 'css'],
+    directory(context) {
+        return context.directoryPath;
+    },
+    filename(context) {
+        return context.fileName;
+    }
+};
+export const style = (options) => {
+    const name = 'style';
+    options = Object.assign(Object.assign({}, defaults), options);
+    const next = (context) => {
+        const filename = options.filename(context);
+        const directory = options.directory(context);
+        for (let extension of options.extensions) {
+            const stylePath = path.join(directory, `${filename}.${extension}`);
+            if (!fs.existsSync(stylePath))
+                continue;
+            context.stylePath = stylePath;
+            break;
+        }
+        if (!context.stylePath)
+            return;
+        context.fileAST.program.body.unshift(t.importDeclaration([t.importDefaultSpecifier(t.identifier('AUTO_IMPORT_STYLE'))], t.stringLiteral(context.stylePath + '?inline')));
+        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier('AUTO_IMPORT_STYLE'), undefined, null, undefined, true));
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/validate.js

@@ -0,0 +1,40 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { hasDecorator, visitor } from '../utils/index.js';
+export const validate = () => {
+    const name = 'validate';
+    const next = (context) => {
+        let hasValidImport;
+        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;
+                    hasValidImport = true;
+                    path.stop();
+                }
+            }
+        });
+        let hasValidExport;
+        visitor(context.fileAST, {
+            ExportNamedDeclaration(path) {
+                if (hasValidExport) {
+                    hasValidExport = false;
+                    return path.stop();
+                }
+                if (path.node.declaration.type !== 'ClassDeclaration')
+                    return;
+                if (!hasDecorator(path.node.declaration, CONSTANTS.DECORATOR_ELEMENT))
+                    return;
+                hasValidExport = true;
+            }
+        });
+        context.isInvalid = !hasValidImport || !hasValidExport;
+    };
+    return {
+        name,
+        next
+    };
+};

package/{dist/configs/constants.d.ts → constants/index.d.ts}

@@ -1,3 +1,4 @@
+export declare const PACKAGE_NAME = "@htmlplus/element";
 export declare const API_HOST = "$host$";
 export declare const API_READY = "$ready$";
 export declare const API_SETUP = "$setup$";

package/{dist/configs/constants.js → constants/index.js}

@@ -1,3 +1,4 @@
+export const PACKAGE_NAME = '@htmlplus/element';
 // apis
 export const API_HOST = '$host$';
 export const API_READY = '$ready$';

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
   "type": "module",
+  "main": "./client/index.js",
+  "types": "./client/index.d.ts",
   "scripts": {
     "prebuild": "npm run clean",
     "build": "tsc",
@@ -12,53 +14,15 @@
     "postbuild": "node scripts/build.post.js",
     "clean": "rimraf dist",
     "format": "prettier --write .",
-    "dev:start": "node src/dev/start.js",
-    "dev:build": "node src/dev/build.js"
-  },
-  "exports": {
-    ".": {
-      "default": "./dist/client/index.js"
-    },
-    "./compiler": {
-      "default": "./dist/compiler/index.js"
-    },
-    "./decorators": {
-      "default": "./dist/client/decorators/index.js"
-    },
-    "./helpers": {
-      "default": "./dist/client/helpers/index.js"
-    },
-    "./runtime": {
-      "default": "./dist/runtime/index.js"
-    },
-    "./services": {
-      "default": "./dist/client/services/index.js"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./dist/client/index.d.ts"
-      ],
-      "compiler": [
-        "./dist/compiler/index.d.ts"
-      ],
-      "decorators": [
-        "./dist/client/decorators/index.d.ts"
-      ],
-      "helpers": [
-        "./dist/client/helpers/index.d.ts"
-      ],
-      "runtime": [
-        "./dist/runtime/index.d.ts"
-      ],
-      "services": [
-        "./dist/client/services/index.d.ts"
-      ]
-    }
+    "dev:start": "node src/dev/scripts/start.js",
+    "dev:build": "node src/dev/scripts/build.js"
   },
   "files": [
-    "dist",
+    "client",
+    "compiler",
+    "constants",
+    "runtime",
+    "types",
     "package.json",
     "README.md"
   ],
@@ -84,7 +48,6 @@
     "fast-glob": "^3.2.11",
     "handlebars": "^4.7.7",
     "log-update": "^5.0.0",
-    "sass": "^1.43.4",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.2",
     "uhtml": "^2.7.6"

package/{dist/types → types}/context.d.ts

@@ -1,5 +1,8 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
+    dependencies?: Array<Context>;
+    dependenciesUnresolved?: Array<string>;
+    isInvalid?: boolean;
     script?: string;
     componentClassName?: string;
     componentInterfaceName?: string;

package/types/global.d.ts

@@ -0,0 +1,4 @@
+import { Context } from './context.js';
+export interface Global {
+    contexts: Array<Context>;
+}

package/{dist/types → types}/index.d.ts

@@ -1,3 +1,4 @@
 export * from './context.js';
+export * from './global.js';
 export * from './plugin.js';
 export * from './plus-element.js';

package/{dist/types → types}/index.js

@@ -1,3 +1,4 @@
 export * from './context.js';
+export * from './global.js';
 export * from './plugin.js';
 export * from './plus-element.js';

package/types/plugin.d.ts

@@ -0,0 +1,9 @@
+import { Context } from './context.js';
+import { Global } from './global';
+export declare type Return<T> = void | T | Promise<T>;
+export declare type Plugin = {
+    name: string;
+    start?: (global: Global) => Return<Global>;
+    next?: (context: Context, global: Global) => Return<Context>;
+    finish?: (global: Global) => Return<Global>;
+};

package/types/plus-element.js

@@ -0,0 +1 @@
+export {};

package/dist/compiler/compiler.js

@@ -1,47 +0,0 @@
-import logUpdate from 'log-update';
-const log = (namespace, message) => {
-    logUpdate(`${new Date().toLocaleTimeString()} [@htmlplus/element]${namespace ? `[${namespace}]` : ''} ${message}`);
-};
-export default (...plugins) => {
-    let global = {
-        contexts: {}
-    };
-    const start = async () => {
-        log(undefined, 'Starting.');
-        for (const plugin of plugins) {
-            if (!plugin.start)
-                continue;
-            global = (await plugin.start(global)) || global;
-            log(plugin.name, 'Started successfully.');
-        }
-    };
-    const next = async (filePath) => {
-        const key = filePath.split(/[\/|\\]/g).pop();
-        let context = {
-            filePath
-        };
-        for (const plugin of plugins) {
-            if (!plugin.next)
-                continue;
-            context = (await plugin.next(context, global)) || context;
-            log(`${key}:${plugin.name}`, 'Executed successfully.');
-        }
-        log(key, 'Executed successfully.');
-        global.contexts[filePath] = context;
-        return context;
-    };
-    const finish = async () => {
-        for (const plugin of plugins) {
-            if (!plugin.finish)
-                continue;
-            global = (await plugin.finish(global)) || global;
-            log(plugin.name, 'Finished successfully.');
-        }
-        log(undefined, 'Finished.');
-    };
-    return {
-        start,
-        next,
-        finish
-    };
-};

package/dist/compiler/plugins/attach.d.ts

@@ -1,11 +0,0 @@
-import { Context } from '../../types/index.js';
-export interface AttachOptions {
-    dependencies?: boolean;
-    members?: boolean;
-    styles?: boolean;
-    typings?: boolean;
-}
-export declare const attach: (options: AttachOptions) => {
-    name: string;
-    next: (context: Context) => void;
-};

package/dist/compiler/plugins/attach.js

@@ -1,101 +0,0 @@
-import t from '@babel/types';
-import * as CONSTANTS from '../../configs/constants.js';
-import { visitor } from '../utils/index.js';
-const defaults = {
-    dependencies: true,
-    members: true,
-    styles: true,
-    typings: true
-};
-export const attach = (options) => {
-    options = Object.assign({}, defaults, options);
-    const name = 'attach';
-    const next = (context) => {
-        // TODO
-        if (options.dependencies) {
-        }
-        if (options.styles && context.styleParsed)
-            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.stringLiteral(context.styleParsed), undefined, null, undefined, true));
-        if (options.members) {
-            context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
-                ...context.classProperties.map((property) => {
-                    var _a, _b;
-                    const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
-                    const elements = [];
-                    switch (type) {
-                        case 'TSBooleanKeyword':
-                            elements.push(t.stringLiteral(CONSTANTS.TYPE_BOOLEAN));
-                            break;
-                        case 'TSStringKeyword':
-                            elements.push(t.stringLiteral(CONSTANTS.TYPE_STRING));
-                            break;
-                        case 'TSNumberKeyword':
-                            elements.push(t.stringLiteral(CONSTANTS.TYPE_NUMBER));
-                            break;
-                        default:
-                            elements.push(t.nullLiteral());
-                            break;
-                    }
-                    if (property.value)
-                        elements.push(property.value);
-                    return t.objectProperty(t.identifier(property.key['name']), t.arrayExpression(elements));
-                }),
-                ...context.classMethods.map((method) => {
-                    const elements = [t.stringLiteral(CONSTANTS.TYPE_FUNCTION)];
-                    return t.objectProperty(t.identifier(method.key['name']), t.arrayExpression(elements));
-                })
-            ]), undefined, undefined, undefined, true));
-        }
-        if (options.typings) {
-            visitor(context.fileAST, {
-                Program(path) {
-                    path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                        t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [], t.tsInterfaceBody([
-                            ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
-                                optional: property.optional,
-                                leadingComments: property.leadingComments
-                            }))
-                        ])),
-                        t.variableDeclaration('var', [
-                            t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
-                                typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
-                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName)))),
-                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName))))
-                                ]))
-                            }))
-                        ]),
-                        t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
-                            t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentInterfaceName))])))
-                        ]))
-                    ])), {
-                        declare: true,
-                        global: true
-                    }));
-                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
-                    // TODO
-                    t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
-                        ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
-                            optional: property.optional,
-                            leadingComments: property.leadingComments
-                        })),
-                        ...context.classEvents.map((event) => {
-                            var _a, _b;
-                            return Object.assign(t.tSPropertySignature(event.key, t.tsTypeAnnotation(t.tsFunctionType(undefined, [
-                                Object.assign({}, t.identifier('event'), {
-                                    typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_b = (_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeParameters))
-                                })
-                            ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
-                                optional: true,
-                                leadingComments: event.leadingComments
-                            });
-                        })
-                    ]))));
-                }
-            });
-        }
-    };
-    return {
-        name,
-        next
-    };
-};

package/dist/compiler/plugins/index.d.ts

@@ -1,11 +0,0 @@
-export * from './react.proxy/index.js';
-export * from './attach.js';
-export * from './docs.js';
-export * from './extract.js';
-export * from './parse.js';
-export * from './print.js';
-export * from './read.js';
-export * from './sass.js';
-export * from './uhtml.js';
-export * from './validate.js';
-export * from './vscode.js';