@htmlplus/element 0.4.4 → 0.4.7

package/compiler/plugins/style.js

@@ -1,36 +1,34 @@
 import t from '@babel/types';
-import fs from 'fs';
+import fs from 'fs-extra';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
+import { addDependency } from '../utils/index.js';
 const defaults = {
-    extensions: ['scss', 'css'],
-    directory(context) {
-        return context.directoryPath;
-    },
-    filename(context) {
-        return context.fileName;
+    references(context) {
+        return [
+            path.join(context.directoryPath, `${context.fileName}.css`),
+            path.join(context.directoryPath, `${context.fileName}.less`),
+            path.join(context.directoryPath, `${context.fileName}.sass`),
+            path.join(context.directoryPath, `${context.fileName}.scss`),
+            path.join(context.directoryPath, `${context.fileName}.styl`)
+        ];
     }
 };
 export const style = (options) => {
     const name = 'style';
-    options = Object.assign(Object.assign({}, defaults), options);
+    options = 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))
+        const references = options.references(context);
+        for (const reference of references) {
+            if (!fs.existsSync(reference))
                 continue;
-            context.stylePath = stylePath;
-            break;
+            context.stylePath = reference;
         }
         if (!context.stylePath)
             return;
-        context.fileAST.program.body.unshift(t.importDeclaration([t.importDefaultSpecifier(t.identifier('AUTO_IMPORT_STYLE'))], t.stringLiteral(context.stylePath)));
-        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier('AUTO_IMPORT_STYLE'), undefined, null, undefined, true));
-    };
-    return {
-        name,
-        next
+        const local = addDependency(context.fileAST, context.stylePath, 'AUTO_IMPORT_STYLE');
+        const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);
+        context.class.body.body.unshift(property);
     };
+    return { name, next };
 };

package/compiler/plugins/validate.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export declare const validate: () => {
     name: string;
     next: (context: Context) => void;

package/compiler/plugins/validate.js

@@ -33,8 +33,5 @@ export const validate = () => {
         });
         context.isInvalid = !hasValidImport || !hasValidExport;
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

package/compiler/plugins/visualStudioCode.d.ts

@@ -0,0 +1,8 @@
+import { Global } from '../../types';
+export interface VisualStudioCodeOptions {
+    destination: string;
+}
+export declare const visualStudioCode: (options: VisualStudioCodeOptions) => {
+    name: string;
+    finish: (global: Global) => void;
+};

package/compiler/plugins/visualStudioCode.js

@@ -0,0 +1,28 @@
+const defaults = {};
+export const visualStudioCode = (options) => {
+    const name = 'visualStudioCode';
+    options = Object.assign({}, defaults, options);
+    const finish = (global) => {
+        // TODO
+        // {
+        //   version: 1.1,
+        //   tags: [
+        //     {
+        //       name: context.componentKey,
+        //       description: {
+        //         kind: 'markdown',
+        //         value: description
+        //       },
+        //       attributes: properties,
+        //       references: [
+        //         {
+        //           name: 'Source code',
+        //           url: `https://github.com/htmlplus/core/tree/main/src/components/${context.directoryName}/${context.fileName}.tsx`
+        //         }
+        //       ]
+        //     }
+        //   ]
+        // };
+    };
+    return { name, finish };
+};

package/compiler/plugins/webTypes.d.ts

@@ -1,9 +1,9 @@
-import { Global } from '../../types/index.js';
+import { Global } from '../../types';
 export interface WebTypesOptions {
     destination: string;
-    docUrl: () => string;
     packageName: string;
     packageVersion: string;
+    docUrl: () => string;
 }
 export declare const webTypes: (options: WebTypesOptions) => {
     name: string;

package/compiler/plugins/webTypes.js

@@ -1,9 +1,11 @@
 import { camelCase, paramCase } from 'change-case';
-import fs from 'fs';
+import fs from 'fs-extra';
 import path from 'path';
 import { getTags, print } from '../utils/index.js';
+const defaults = {};
 export const webTypes = (options) => {
     const name = 'webTypes';
+    options = Object.assign({}, defaults, options);
     const finish = (global) => {
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
@@ -70,13 +72,8 @@ export const webTypes = (options) => {
             }
         };
         const dirname = path.dirname(options.destination);
-        if (!fs.existsSync(dirname))
-            fs.mkdirSync(dirname, { recursive: true });
-        const raw = JSON.stringify(json, null, 2);
-        fs.writeFileSync(options.destination, raw, 'utf8');
-    };
-    return {
-        name,
-        finish
+        fs.ensureDirSync(dirname);
+        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
     };
+    return { name, finish };
 };

package/compiler/utils/addDependency.d.ts

@@ -0,0 +1,4 @@
+import { File } from '@babel/types';
+export declare function addDependency(path: File | any, source: string): void;
+export declare function addDependency(path: File | any, source: string, local: string): string;
+export declare function addDependency(path: File | any, source: string, local: string, imported: string): string;

package/compiler/utils/addDependency.js

@@ -0,0 +1,51 @@
+import t from '@babel/types';
+import { visitor } from './visitor.js';
+export function addDependency(path, source, local, imported) {
+    const isDefault = local && !imported;
+    const isImport = local && imported;
+    const isNormal = !local && !imported;
+    let declaration;
+    let file = path;
+    while (file.parentPath)
+        file = file.parentPath;
+    file = file.node || file;
+    visitor(file, {
+        ImportDeclaration(path) {
+            if (path.node.source.value != source)
+                return;
+            declaration = path.node;
+        }
+    });
+    if (isNormal && declaration)
+        return;
+    let specifier = declaration === null || declaration === void 0 ? void 0 : declaration.specifiers.find((specifier) => {
+        var _a;
+        if (isDefault) {
+            return specifier.type == 'ImportDefaultSpecifier';
+        }
+        else if (isImport) {
+            return ((_a = specifier.imported) === null || _a === void 0 ? void 0 : _a.name) == imported;
+        }
+    });
+    if (specifier)
+        return specifier.local.name;
+    if (isDefault) {
+        specifier = t.importDefaultSpecifier(t.identifier(local));
+    }
+    else if (isImport) {
+        specifier = t.importSpecifier(t.identifier(local), t.identifier(imported));
+    }
+    if (declaration) {
+        if (isDefault) {
+            declaration.specifiers.unshift(specifier);
+        }
+        else if (isImport) {
+            declaration.specifiers.push(specifier);
+        }
+    }
+    else {
+        // TODO
+        (file.program || file).body.unshift(t.importDeclaration(specifier ? [specifier] : [], t.stringLiteral(source)));
+    }
+    return local;
+}

package/compiler/utils/getType.js

@@ -1,5 +1,5 @@
 import { parse } from '@babel/parser';
-import fs from 'fs';
+import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
 import { visitor } from './visitor.js';
 // TODO: return type

package/compiler/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './__dirname.js';
+export * from './addDependency.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';
@@ -6,6 +7,7 @@ export * from './hasDecorator.js';
 export * from './isDirectoryEmpty.js';
 export * from './printType.js';
 export * from './print.js';
+export * from './removeUnusedImport.js';
 export * from './renderTemplate.js';
 export * from './tags.js';
 export * from './visitor.js';

package/compiler/utils/index.js

@@ -1,4 +1,5 @@
 export * from './__dirname.js';
+export * from './addDependency.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';
@@ -6,6 +7,7 @@ export * from './hasDecorator.js';
 export * from './isDirectoryEmpty.js';
 export * from './printType.js';
 export * from './print.js';
+export * from './removeUnusedImport.js';
 export * from './renderTemplate.js';
 export * from './tags.js';
 export * from './visitor.js';

package/compiler/utils/isDirectoryEmpty.js

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import fs from 'fs-extra';
 export const isDirectoryEmpty = (directory) => {
     try {
         const files = fs.readdirSync(directory);

package/compiler/utils/removeUnusedImport.d.ts

@@ -0,0 +1 @@
+export declare const removeUnusedImport: (ast: any) => void;

package/compiler/utils/removeUnusedImport.js

@@ -0,0 +1,49 @@
+import t from '@babel/types';
+import { visitor } from './visitor.js';
+// TODO
+export const removeUnusedImport = (ast) => {
+    visitor(ast, {
+        Program: {
+            exit(path) {
+                for (const entry of Object.entries(path.scope.bindings)) {
+                    let { kind, path, referenced, referencePaths } = entry[1];
+                    if (kind !== 'module')
+                        continue;
+                    if (referenced) {
+                        referenced = false;
+                        for (const referencePath of referencePaths) {
+                            let find = true;
+                            let parent = referencePath;
+                            while (parent) {
+                                if (!parent.node) {
+                                    find = false;
+                                    break;
+                                }
+                                parent = parent.parentPath;
+                            }
+                            if (!find)
+                                continue;
+                            referenced = true;
+                            break;
+                        }
+                    }
+                    if (referenced)
+                        continue;
+                    const source = path.parentPath.get('source');
+                    if (!t.isStringLiteral(source))
+                        continue;
+                    if (path.isImportSpecifier()) {
+                        path.remove();
+                        if (path.parentPath.node.specifiers.length)
+                            continue;
+                        path.parentPath.remove();
+                        continue;
+                    }
+                    if (!path.parentPath)
+                        continue;
+                    path.parentPath.remove();
+                }
+            }
+        }
+    });
+};

package/compiler/utils/renderTemplate.js

@@ -1,5 +1,5 @@
 import glob from 'fast-glob';
-import fs from 'fs';
+import fs from 'fs-extra';
 import handlebars from 'handlebars';
 import path from 'path';
 export const renderTemplate = (source, destination, options) => (context) => {
@@ -17,9 +17,7 @@ export const renderTemplate = (source, destination, options) => (context) => {
         const directory = path.dirname(to);
         const raw = fs.readFileSync(from, 'utf8');
         const template = handlebars.compile(raw)(context);
-        if (!fs.existsSync(directory)) {
-            fs.mkdirSync(directory, { recursive: true });
-        }
+        fs.ensureDirSync(directory);
         fs.writeFileSync(to, template, 'utf8');
     }
 };

package/constants/index.d.ts

@@ -20,3 +20,4 @@ export declare const TYPE_DATE = "date";
 export declare const TYPE_FUNCTION = "function";
 export declare const TYPE_STRING = "string";
 export declare const TYPE_NUMBER = "number";
+export declare const UTILS_STYLE_MAP = "styles";

package/constants/index.js

@@ -27,3 +27,5 @@ export const TYPE_DATE = 'date';
 export const TYPE_FUNCTION = 'function';
 export const TYPE_STRING = 'string';
 export const TYPE_NUMBER = 'number';
+// utils
+export const UTILS_STYLE_MAP = 'styles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.4.4",
+  "version": "0.4.7",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
@@ -8,13 +8,7 @@
   "main": "client/index.js",
   "types": "client/index.d.ts",
   "files": [
-    "client",
-    "compiler",
-    "constants",
-    "runtime",
-    "types",
-    "package.json",
-    "README.md"
+    "**/*.*"
   ],
   "publishConfig": {
     "directory": "dist"
@@ -25,12 +19,12 @@
   "keywords": [],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/htmlplus/element.git"
+    "url": "git+https://github.com/htmlplus/htmlplus.git"
   },
   "bugs": {
-    "url": "https://github.com/htmlplus/element/issues"
+    "url": "https://github.com/htmlplus/htmlplus/issues"
   },
-  "homepage": "https://github.com/htmlplus/element#readme",
+  "homepage": "https://github.com/htmlplus/htmlplus#readme",
   "dependencies": {
     "@babel/generator": "^7.18.9",
     "@babel/parser": "^7.18.9",
@@ -41,7 +35,6 @@
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "handlebars": "^4.7.7",
-    "listr2": "^5.0.1",
     "ora": "^6.1.2",
     "typescript": "^4.7.4"
   },

package/types/context.d.ts

@@ -1,5 +1,6 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
+    assets?: string;
     customElementNames?: Array<string>;
     dependencies?: Array<Context>;
     dependenciesUnresolved?: Array<string>;

package/types/global.d.ts

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

package/types/index.d.ts

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

package/types/index.js

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

package/types/plugin.d.ts

@@ -1,4 +1,4 @@
-import { Context } from './context.js';
+import { Context } from './context';
 import { Global } from './global';
 export declare type Return<T> = void | T | Promise<T>;
 export declare type Plugin = {

package/compiler/plugins/external.js

@@ -1,25 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-const defaults = {
-    source(context) {
-        return path.join(context.directoryPath, 'external');
-    },
-    destination(context) {
-        return '';
-    }
-};
-export const external = (options) => {
-    const name = 'external';
-    options = Object.assign(Object.assign({}, defaults), options);
-    const next = (context) => {
-        var _a;
-        const source = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
-        if (!source || !fs.existsSync(source))
-            return;
-        fs.copySync(source, options.destination(context));
-    };
-    return {
-        name,
-        next
-    };
-};

package/compiler/plugins/vscode.d.ts

@@ -1,11 +0,0 @@
-import { Context } from '../../types/index.js';
-export interface VscodeOptions {
-    dist: string;
-    prefix: string;
-}
-export declare const vscode: (options: VscodeOptions) => {
-    name: string;
-    start: (global: any) => void;
-    next: (context: Context, global: any) => void;
-    finish: (global: any) => void;
-};

package/compiler/plugins/vscode.js

@@ -1,83 +0,0 @@
-import { paramCase } from 'change-case';
-import fs from 'fs';
-import path from 'path';
-import { getTags, getType, printType } from '../utils/index.js';
-export const vscode = (options) => {
-    const name = 'vscode';
-    const start = (global) => {
-        global.vscode = {
-            version: 1.1,
-            tags: []
-        };
-    };
-    const next = (context, global) => {
-        const readme = (() => {
-            try {
-                const source = path.resolve(context.directoryPath || '', `${context.fileName}.md`);
-                return fs.readFileSync(source, 'utf8');
-            }
-            catch (_a) { }
-        })();
-        const description = (() => {
-            const content = readme || '';
-            if (!content.startsWith('# '))
-                return '';
-            const sections = content.split('\n');
-            for (let i = 1; i < sections.length; i++) {
-                const section = sections[i].trim();
-                if (!section)
-                    continue;
-                return section;
-            }
-            return '';
-        })();
-        const properties = (context.classProperties || []).map((property) => {
-            var _a;
-            const name = paramCase(property.key['name']);
-            const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const attribute = {
-                name,
-                description
-            };
-            // TODO
-            let { members = [] } = (() => {
-                const ast = getType(context.fileAST, (property.typeAnnotation || {})['typeAnnotation'], {
-                    directory: context.directoryPath
-                });
-                return printType(ast);
-            })();
-            // TODO
-            members = members.filter((member) => member.key !== member.type).map((member) => ({ name: member.key }));
-            if (members.length)
-                attribute.values = members;
-            return attribute;
-        });
-        global.vscode.tags.push({
-            name: context.componentKey,
-            description: {
-                kind: 'markdown',
-                value: description
-            },
-            attributes: properties,
-            references: [
-                {
-                    name: 'Source code',
-                    url: `https://github.com/htmlplus/core/tree/main/src/components/${context.directoryName}/${context.fileName}.tsx`
-                }
-            ]
-        });
-    };
-    const finish = (global) => {
-        global.vscode.tags = global.vscode.tags.sort((a, b) => (a.name > b.name ? 1 : -1));
-        // TODO
-        // fs.ensureDirSync(path.dirname(options.dist));
-        // TODO
-        // fs.writeJSONSync(options.dist, global.vscode, { replacer: null, spaces: 2 });
-    };
-    return {
-        name,
-        start,
-        next,
-        finish
-    };
-};