@htmlplus/element 0.4.5 → 0.4.7

package/bundler/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rollup.js';
+export * from './vite.js';

package/bundler/index.js

@@ -0,0 +1,2 @@
+export * from './rollup.js';
+export * from './vite.js';

package/bundler/rollup.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from '../types';
+export declare const rollup: (...plugins: Array<Plugin>) => {
+    name: string;
+    buildStart(): Promise<void>;
+    load(id: any): Promise<string | undefined>;
+    buildEnd(): Promise<void>;
+};

package/bundler/rollup.js

@@ -0,0 +1,21 @@
+import compiler from '../compiler/index.js';
+export const rollup = (...plugins) => {
+    const { start, next, finish } = compiler(...plugins);
+    return {
+        name: 'htmlplus',
+        async buildStart() {
+            await start();
+        },
+        async load(id) {
+            if (!id.endsWith('.tsx'))
+                return;
+            const { isInvalid, script } = await next(id);
+            if (isInvalid)
+                return;
+            return script;
+        },
+        async buildEnd() {
+            await finish();
+        }
+    };
+};

package/bundler/vite.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from '../types';
+export declare const vite: (...plugins: Array<Plugin>) => {
+    name: string;
+    buildStart(): Promise<void>;
+    load(id: any): Promise<string | undefined>;
+    buildEnd(): Promise<void>;
+};

package/bundler/vite.js

@@ -0,0 +1,25 @@
+import path from 'path';
+import compiler from '../compiler/index.js';
+export const vite = (...plugins) => {
+    const { start, next, finish } = compiler(...plugins);
+    return {
+        name: 'htmlplus',
+        async buildStart() {
+            await start();
+        },
+        async load(id) {
+            if (!id.endsWith('.tsx'))
+                return;
+            let { isInvalid, script, stylePath } = await next(id);
+            if (isInvalid)
+                return;
+            if (script && stylePath) {
+                script = script.replace(path.basename(stylePath), `${path.basename(stylePath)}?inline`);
+            }
+            return script;
+        },
+        async buildEnd() {
+            await finish();
+        }
+    };
+};

package/client/decorators/attributes.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare function Attributes(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/element.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare function Element(tag?: string): (constructor: PlusElement) => void;

package/client/decorators/event.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
 export interface EventOptions {
     /**

package/client/decorators/listen.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export interface ListenOptions {
     target?: 'host' | 'body' | 'document' | 'window';
     once?: boolean;

package/client/decorators/method.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare function Method(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/property.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export interface PropertyOptions {
     /**
      * Whether property value is reflected back to the associated attribute. default is `false`.

package/client/decorators/state.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare function State(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/watch.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 /**
  * Monitors properties and states to catch changes.
  * The decorated method will be invoked after any

package/client/helpers/direction.d.ts

@@ -1,3 +1,3 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare type Direction = 'ltr' | 'rtl';
 export declare const direction: (target: PlusElement) => Direction;

package/client/helpers/isRTL.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const isRTL: (target: PlusElement) => boolean;

package/client/helpers/slots.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 declare type Slots = {
     [key: string]: boolean;
 };

package/client/utils/getMemberType.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const getMemberType: (target: PlusElement, key: string) => string;

package/client/utils/getMembersKey.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const getMembersKey: (target: PlusElement) => string[];

package/client/utils/getStyles.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const getStyles: (target: PlusElement) => string | undefined;

package/client/utils/host.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const host: (target: PlusElement) => HTMLElement;

package/client/utils/request.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const request: (target: PlusElement, state?: {
     [key: string]: [any, any];
 } | undefined) => Promise<boolean>;

package/client/utils/request.js

@@ -1,6 +1,6 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { call } from '../utils/call';
-import { task } from '../utils/task';
+import { call } from '../utils/call.js';
+import { task } from '../utils/task.js';
 import { html, render } from '../vendor/uhtml.js';
 import { getStyles } from './getStyles.js';
 import { host } from './host.js';

package/compiler/compiler.d.ts

@@ -1,4 +1,4 @@
-import { Context, Plugin } from '../types/index.js';
+import { Context, Plugin } from '../types';
 declare const _default: (...plugins: Array<Plugin>) => {
     start: () => Promise<void>;
     next: (filePath: string) => Promise<Context>;

package/compiler/plugins/assets.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export declare type AssetsOptions = {
     destination: (context: Context) => string;
     source?: (context: Context) => string;

package/compiler/plugins/customElement.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export interface CustomElementOptions {
     typings?: boolean;
 }

package/compiler/plugins/customElement.js

@@ -21,7 +21,7 @@ export const customElement = (options) => {
                     return;
                 if (value.type != 'JSXExpressionContainer')
                     return;
-                const local = addDependency(ast, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP);
+                const local = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP, CONSTANTS.UTILS_STYLE_MAP);
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
                 path.skip();
             }

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

@@ -1,4 +1,4 @@
-import { Global } from '../../../types/index.js';
+import { Global } from '../../../types';
 export interface CustomElementReactOptions {
     compact?: boolean;
     destination: string;

package/compiler/plugins/document.d.ts

@@ -1,4 +1,4 @@
-import { Global } from '../../types/index.js';
+import { Global } from '../../types';
 export interface DocumentOptions {
     destination: string;
 }

package/compiler/plugins/extract.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export interface ExtractOptions {
     prefix?: string;
 }

package/compiler/plugins/finish.d.ts

@@ -0,0 +1,4 @@
+export declare const finish: (callback: () => void) => {
+    name: string;
+    finish: () => void;
+};

package/compiler/plugins/finish.js

@@ -0,0 +1,7 @@
+export const finish = (callback) => {
+    const name = 'finish';
+    const finish = () => {
+        callback();
+    };
+    return { name, finish };
+};

package/compiler/plugins/index.d.ts

@@ -3,8 +3,10 @@ export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
 export * from './extract.js';
+export * from './finish.js';
 export * from './parse.js';
 export * from './read.js';
+export * from './start.js';
 export * from './style.js';
 export * from './validate.js';
 export * from './webTypes.js';

package/compiler/plugins/index.js

@@ -3,8 +3,10 @@ export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
 export * from './extract.js';
+export * from './finish.js';
 export * from './parse.js';
 export * from './read.js';
+export * from './start.js';
 export * from './style.js';
 export * from './validate.js';
 export * from './webTypes.js';

package/compiler/plugins/parse.d.ts

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

package/compiler/plugins/read.d.ts

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

package/compiler/plugins/start.d.ts

@@ -0,0 +1,4 @@
+export declare const start: (callback: () => void) => {
+    name: string;
+    start: () => void;
+};

package/compiler/plugins/start.js

@@ -0,0 +1,7 @@
+export const start = (callback) => {
+    const name = 'start';
+    const start = () => {
+        callback();
+    };
+    return { name, start };
+};

package/compiler/plugins/style.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export declare type StyleOptions = {
     references?: (context: Context) => string[];
 };

package/compiler/plugins/style.js

@@ -26,7 +26,7 @@ export const style = (options) => {
         }
         if (!context.stylePath)
             return;
-        const local = addDependency(context.fileAST, context.stylePath, 'AUTO_IMPORT_STYLE', undefined, true);
+        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);
     };

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/visualStudioCode.d.ts

@@ -1,4 +1,4 @@
-import { Global } from '../../types/index.js';
+import { Global } from '../../types';
 export interface VisualStudioCodeOptions {
     destination: string;
 }

package/compiler/plugins/webTypes.d.ts

@@ -1,4 +1,4 @@
-import { Global } from '../../types/index.js';
+import { Global } from '../../types';
 export interface WebTypesOptions {
     destination: string;
     packageName: string;

package/compiler/utils/addDependency.d.ts

@@ -1,2 +1,4 @@
 import { File } from '@babel/types';
-export declare const addDependency: (file: File, source: string, imported: string, local?: string, isDefault?: boolean) => string;
+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

@@ -1,41 +1,51 @@
 import t from '@babel/types';
 import { visitor } from './visitor.js';
-export const addDependency = (file, source, imported, local, isDefault) => {
-    let node;
+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;
-            node = path.node;
+            declaration = path.node;
         }
     });
-    let specifier = node === null || node === void 0 ? void 0 : node.specifiers.find((specifier) => {
+    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 {
+        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(imported));
+        specifier = t.importDefaultSpecifier(t.identifier(local));
     }
-    else {
-        specifier = t.importSpecifier(t.identifier(local !== null && local !== void 0 ? local : imported), t.identifier(imported));
+    else if (isImport) {
+        specifier = t.importSpecifier(t.identifier(local), t.identifier(imported));
     }
-    if (node) {
+    if (declaration) {
         if (isDefault) {
-            node.specifiers.unshift(specifier);
+            declaration.specifiers.unshift(specifier);
         }
-        else {
-            node.specifiers.push(specifier);
+        else if (isImport) {
+            declaration.specifiers.push(specifier);
         }
     }
     else {
-        file.program.body.unshift(t.importDeclaration([specifier], t.stringLiteral(source)));
+        // TODO
+        (file.program || file).body.unshift(t.importDeclaration(specifier ? [specifier] : [], t.stringLiteral(source)));
     }
-    return isDefault ? imported : local !== null && local !== void 0 ? local : imported;
-};
+    return local;
+}

package/compiler/utils/index.d.ts

@@ -7,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

@@ -7,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.4.5",
+  "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",

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 = {