@htmlplus/element 0.4.4 → 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/{external.d.ts → assets.d.ts}

@@ -1,9 +1,9 @@
-import { Context } from '../../types/index.js';
-export declare type ExternalOptions = {
-    source?: (context: Context) => string;
+import { Context } from '../../types';
+export declare type AssetsOptions = {
     destination: (context: Context) => string;
+    source?: (context: Context) => string;
 };
-export declare const external: (options: ExternalOptions) => {
+export declare const assets: (options: AssetsOptions) => {
     name: string;
     next: (context: Context) => void;
 };

package/compiler/plugins/assets.js

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

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

@@ -1,7 +1,7 @@
 import t from '@babel/types';
 import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { print, visitor } from '../utils/index.js';
+import { addDependency, print, visitor } from '../utils/index.js';
 const defaults = {
     typings: true
 };
@@ -11,26 +11,43 @@ export const customElement = (options) => {
     options = Object.assign({}, defaults, options);
     const next = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
+        // attach style mapper for 'style' attribute
+        visitor(ast, {
+            JSXAttribute(path) {
+                const { name, value } = path.node;
+                if (name.name != 'style')
+                    return;
+                if (!value)
+                    return;
+                if (value.type != 'JSXExpressionContainer')
+                    return;
+                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();
+            }
+        });
         // TODO
         visitor(ast, {
             ClassDeclaration(path) {
-                if (path.node.id.name != context.className)
+                const { body, id } = path.node;
+                if (id.name != context.className)
                     return;
-                path.node.body.body.unshift(t.classProperty(t.identifier('uhtml')));
+                body.body.unshift(t.classProperty(t.identifier('uhtml')));
             }
         });
-        // replace className
+        // replace 'className' attribute to 'class'
         visitor(ast, {
             JSXAttribute(path) {
-                if (path.node.name.name != 'className')
+                const { name, value } = path.node;
+                if (name.name != 'className')
                     return;
                 const hasClass = path.parentPath.node.attributes.some((attribute) => attribute.name.name == 'class');
                 if (hasClass)
                     return path.remove();
-                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), path.node.value));
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
-        // jsx to uhtml syntax
+        // TODO: convert 'jsx' to 'uhtml' syntax
         visitor(ast, {
             JSXAttribute: {
                 exit(path) {
@@ -81,9 +98,10 @@ export const customElement = (options) => {
         // attach members
         visitor(ast, {
             ClassDeclaration(path) {
-                if (path.node.id.name != context.className)
+                const { body, id } = path.node;
+                if (id.name != context.className)
                     return;
-                path.node.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
+                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;
@@ -117,7 +135,8 @@ export const customElement = (options) => {
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {
-                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
+                    const { body } = 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), {
@@ -136,7 +155,7 @@ export const customElement = (options) => {
                             });
                         })
                     ]))));
-                    path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
+                    body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
                         t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [
                             t.tSExpressionWithTypeArguments(t.identifier('HTMLElement')) // TODO
                         ], t.tsInterfaceBody([
@@ -177,10 +196,8 @@ export const customElement = (options) => {
                 }
             });
         }
+        // TODO
         context.script = print(ast);
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

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/customElementReact/customElementReact.js

@@ -15,8 +15,8 @@ const defaults = {
 };
 export const customElementReact = (options) => {
     const name = 'customElementReact';
+    options = Object.assign({}, defaults, options);
     const finish = (global) => {
-        options = Object.assign(Object.assign({}, defaults), options);
         // TODO
         const globalNew = {
             contexts: global.contexts.reduce((previous, current) => (Object.assign(Object.assign({}, previous), { [current.filePath]: current })), {}),
@@ -126,8 +126,5 @@ export const customElementReact = (options) => {
             renderTemplate(patterns, options.destination, config)(globalNew);
         }
     };
-    return {
-        name,
-        finish
-    };
+    return { name, finish };
 };

package/compiler/plugins/document.d.ts

@@ -1,10 +1,8 @@
-import { Context } from '../../types/index.js';
+import { Global } from '../../types';
 export interface DocumentOptions {
     destination: string;
 }
 export declare const document: (options: DocumentOptions) => {
     name: string;
-    start: (global: any) => void;
-    next: (context: Context, global: any) => void;
-    finish: (global: any) => void;
+    finish: (global: Global) => void;
 };