@htmlplus/element 0.1.4 → 0.1.7

package/dist/compiler/plugins/react.proxy/react.proxy.js

@@ -1,58 +1,119 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
+const defaults = {
+    compact: false,
+    dist: '',
+    eventName: undefined,
+    importerComponent(context) {
+        return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
+    },
+    importerComponentType(context) {
+        return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
+    }
+};
 export const reactProxy = (options) => {
     const name = 'react-proxy';
-    const finish = (global) => __awaiter(void 0, void 0, void 0, function* () {
+    const finish = (global) => {
+        options = Object.assign(Object.assign({}, defaults), options);
+        global = Object.assign(Object.assign({}, global), { options });
         const config = { cwd: __dirname(import.meta.url) };
-        const component = 'templates/src/components/*fileName*';
-        global = Object.assign({}, global, { options });
+        const isEmpty = isDirectoryEmpty(options.dist);
         const skip = [];
         const getKey = (component) => component.componentClassName;
-        global.groups = Object.values(global.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)))
-        }))
-            .sort((a, b) => b.components.length - a.components.length)
-            .filter((group) => {
-            if (skip.includes(group.key))
-                return;
-            group.components.forEach((component) => skip.push(getKey(component)));
-            return true;
-        })
-            .map((group) => {
-            const root = group.components.find((component) => getKey(component) == group.key);
-            const all = group.components
-                .map((component) => (Object.assign(Object.assign({}, component), { componentClassNameInCategory: getKey(component).replace(group.key, '') })))
-                .reverse();
-            const filterd = all.filter((component) => getKey(component) != group.key);
-            return {
-                single: !filterd.length,
-                root,
-                all,
-                filterd
+        for (const key in global.contexts) {
+            const context = global.contexts[key];
+            const parse = (input) => {
+                const [source, key] = input.split('#');
+                const [root, ...sub] = key.split('.');
+                const variable = ['Type', ...sub].join('.');
+                return {
+                    source,
+                    variable,
+                    root
+                };
             };
-        })
-            .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
-        if (yield isDirectoryEmpty(options.dist)) {
-            renderTemplate(['templates/**', `!${component}`], options.dist, config)(global);
+            const classEvents = context.classEvents.map((classEvent) => {
+                var _a;
+                const name = ((_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, classEvent.key.name)) || classEvent.key.name;
+                return Object.assign(Object.assign({}, classEvent), { converted: 'on' + name.charAt(0).toUpperCase() + name.slice(1) });
+            });
+            const fileName = context.fileName;
+            const importerComponent = parse(options.importerComponent(context));
+            const importerComponentType = parse(options.importerComponentType(context));
+            const state = Object.assign(Object.assign({}, context), { classEvents,
+                fileName,
+                importerComponent,
+                importerComponentType,
+                options });
+            const patterns = [
+                'templates/src/components/*fileName*.ts.hbs',
+                '!templates/src/components/*fileName*.compact.ts.hbs'
+            ];
+            renderTemplate(patterns, options.dist, config)(state);
         }
-        else {
-            renderTemplate(['templates/src/proxy*', 'templates/src/components/index*'], options.dist, config)(global);
+        if (options.compact) {
+            global.groups = Object.values(global.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)))
+            }))
+                .sort((a, b) => b.components.length - a.components.length)
+                .filter((group) => {
+                if (skip.includes(group.key))
+                    return;
+                group.components.forEach((component) => skip.push(getKey(component)));
+                return true;
+            })
+                .map((group) => {
+                const all = group.components.reverse().map((component, index) => {
+                    const componentClassNameInCategory = getKey(component).replace(group.key, '');
+                    const parse = (input) => {
+                        const [source, key] = input.split('#');
+                        const [root, ...sub] = key.split('.');
+                        const local = root + (index + 1);
+                        const variable = [local, ...sub].join('.');
+                        return {
+                            source,
+                            variable,
+                            root,
+                            local
+                        };
+                    };
+                    const importerComponent = parse(options.importerComponent(component));
+                    const importerComponentType = parse(options.importerComponentType(component));
+                    return Object.assign(Object.assign({}, component), { componentClassNameInCategory,
+                        importerComponent,
+                        importerComponentType });
+                });
+                return {
+                    all,
+                    filterd: all.slice(1),
+                    root: all.at(0),
+                    single: all.length == 1
+                };
+            })
+                .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
+            for (const group of global.groups) {
+                if (group.single)
+                    continue;
+                const state = Object.assign({ fileName: group.root.fileName, options }, group);
+                const patterns = ['templates/src/components/*fileName*.compact.ts.hbs'];
+                renderTemplate(patterns, options.dist, config)(state);
+            }
         }
-        for (const group of global.groups) {
-            renderTemplate(component, options.dist, config)(Object.assign({ options, fileName: group.root.fileName }, group));
+        if (isEmpty) {
+            const patterns = [
+                'templates/**',
+                '!templates/src/components/*fileName*.ts.hbs',
+                '!templates/src/components/*fileName*.compact.ts.hbs'
+            ];
+            renderTemplate(patterns, options.dist, config)(global);
         }
-    });
+        if (!isEmpty) {
+            const patterns = ['templates/src/proxy*', 'templates/src/components/index*'];
+            renderTemplate(patterns, options.dist, config)(global);
+        }
+    };
     return {
         name,
         finish

package/dist/compiler/plugins/react.proxy/templates/package.json.hbs

@@ -1,5 +1,5 @@
 {  
-  "name": "your-react-package-name",
+  "name": "YOUR_REACT_PACKAGE_NAME",
   "version": "0.0.0",
   "type": "module",
   "description": "React output target for your custom element.",
@@ -14,13 +14,14 @@
     "dist"
   ],
   "dependencies": {
-    "{{options.corePackageName}}": "latest",
+    "YOUR_CORE_PACKAGE_NAME": "latest",
     "change-case": "^4.1.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/react": "^16.9.49",
+    "glob": "^7.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",

package/dist/compiler/plugins/react.proxy/templates/rollup.config.js.hbs

@@ -1,20 +1,21 @@
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
+import glob from 'glob';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import typescript from 'rollup-plugin-typescript2';
 
 export default {
-  input: 'src/index.ts',
+  input: glob.sync('src/**/*.ts'),
   output: [
     {
-      dir: 'dist/components',
-      format: 'esm'
-    }
+      dir: 'dist',
+      format: 'esm',
+    },
   ],
   plugins: [
     peerDepsExternal(), 
     resolve(), 
     commonjs(), 
-    typescript()
-  ]
+    typescript(),
+  ],
 };

package/dist/compiler/plugins/react.proxy/templates/src/components/index.ts.hbs

@@ -1,3 +1,17 @@
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+
+{{#if options.compact}}
 {{#each groups}}
+{{#if single}}
 export * from './{{root.fileName}}';
-{{/each}}
+{{else}}
+export * from './{{root.fileName}}.compact';
+{{/if}}
+{{/each}}
+{{else}}
+{{#each contexts}}
+export * from './{{fileName}}';
+{{/each}}
+{{/if}}

package/dist/compiler/plugins/react.proxy/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+ 
+{{#each all}}
+import { {{componentClassName}} } from './{{fileName}}';
+{{/each}}
+
+const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
+  {{#each filterd}}
+  {{componentClassNameInCategory}}: {{componentClassName}},
+  {{/each}}
+});
+
+export { All as {{root.componentClassName}} }

package/dist/compiler/plugins/react.proxy/templates/src/components/{{fileName}}.ts.hbs

@@ -1,38 +1,26 @@
 /* eslint-disable */
 /* tslint:disable */
-/* auto-generated */
+
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
 
 import { proxy } from '../proxy';
-import type { JSX } from '{{options.corePackageName}}';
 
-{{#each all}}
-import {{componentClassName}} from '{{../options.corePackageName}}/{{fileName}}';
-{{/each}}
+{{!-- import { {{importerComponent.root}} as Component } from '{{importerComponent.source}}'; --}}
+import '{{importerComponent.source}}';
+import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.source}}';
 
-{{#each all}}
-const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, JSX.{{componentClassName}}>(
-  '{{componentTag}}', 
-  [
-    {{#each classProperties}}
-    '{{key.name}}',
-    {{/each}}
-  ], 
-  [
-    {{#each classEvents}}
-    '{{key.name}}',
-    {{/each}}
-  ],
-);
+type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Error: key not in T" }> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] }
 
-{{/each}}
-{{#if single}}
-export { {{root.componentClassName}} }
-{{else}}
-const All = /*@__PURE__*/ Object.assign({{root.componentClassName}}, {
-  {{#each filterd}}
-  {{componentClassNameInCategory}}: {{componentClassName}},
+type Renamed = Rename<{{importerComponentType.variable}}, { 
+  {{#each classEvents}}
+  {{key.name}}: '{{converted}}',
   {{/each}}
-});
+}>
 
-export { All as {{root.componentClassName}} }
-{{/if}}
+export const {{componentClassName}} = /*@__PURE__*/ proxy<{{componentInterfaceName}}, Renamed>(
+  '{{componentTag}}', 
+  [{{#each classProperties}}'{{key.name}}', {{/each}}], 
+  [{{#each classEvents}}'{{key.name}}', {{/each}}],
+);

package/dist/compiler/plugins/react.proxy/templates/src/proxy.ts.hbs

@@ -1,6 +1,7 @@
-/**
- * version 0.0.9
- */
+/**************************************************
+ * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
+ **************************************************/
+ 
 import { camelCase, paramCase, pascalCase } from 'change-case';
 import React from 'react';
 

package/dist/compiler/plugins/uhtml.js

@@ -43,6 +43,12 @@ export const uhtml = () => {
                         return;
                     }
                 }
+            },
+            JSXSpreadAttribute: {
+                enter(path) {
+                    // TODO
+                    path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
+                }
             }
         });
     };

package/dist/compiler/utils/is-directory-empty.d.ts

@@ -1 +1 @@
-export declare const isDirectoryEmpty: (directory: string) => Promise<boolean>;
+export declare const isDirectoryEmpty: (directory: string) => boolean;

package/dist/compiler/utils/is-directory-empty.js

@@ -1,19 +1,10 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import fs from 'fs';
-export const isDirectoryEmpty = (directory) => __awaiter(void 0, void 0, void 0, function* () {
+export const isDirectoryEmpty = (directory) => {
     try {
-        const files = yield fs.readdirSync(directory);
+        const files = fs.readdirSync(directory);
         return !files.length;
     }
     catch (_a) {
         return true;
     }
-});
+};

package/dist/configs/constants.d.ts

@@ -1,21 +1,20 @@
-export declare const TOKEN_API = "$api";
-export declare const TOKEN_API_HOST = "host";
-export declare const TOKEN_API_READY = "ready";
-export declare const TOKEN_API_REQUEST = "request";
-export declare const TOKEN_DECORATOR_ELEMENT = "Element";
-export declare const TOKEN_DECORATOR_EVENT = "Event";
-export declare const TOKEN_DECORATOR_PROPERTY = "Property";
-export declare const TOKEN_DECORATOR_STATE = "State";
-export declare const TOKEN_DECORATOR_METHOD = "Method";
-export declare const TOKEN_LIFECYCLE_ADOPTED = "adoptedCallback";
-export declare const TOKEN_LIFECYCLE_CONNECTED = "connectedCallback";
-export declare const TOKEN_LIFECYCLE_DISCONNECTED = "disconnectedCallback";
-export declare const TOKEN_LIFECYCLE_LOADED = "loadedCallback";
-export declare const TOKEN_LIFECYCLE_UPDATE = "updateCallback";
-export declare const TOKEN_LIFECYCLE_UPDATED = "updatedCallback";
-export declare const TOKEN_METHOD_RENDER = "render";
-export declare const TOKEN_STATIC_MEMBERS = "members";
-export declare const TOKEN_STATIC_STYLES = "styles";
+export declare const API_HOST = "$host$";
+export declare const API_READY = "$ready$";
+export declare const API_SETUP = "$setup$";
+export declare const DECORATOR_ELEMENT = "Element";
+export declare const DECORATOR_EVENT = "Event";
+export declare const DECORATOR_PROPERTY = "Property";
+export declare const DECORATOR_STATE = "State";
+export declare const DECORATOR_METHOD = "Method";
+export declare const LIFECYCLE_ADOPTED = "adoptedCallback";
+export declare const LIFECYCLE_CONNECTED = "connectedCallback";
+export declare const LIFECYCLE_DISCONNECTED = "disconnectedCallback";
+export declare const LIFECYCLE_LOADED = "loadedCallback";
+export declare const LIFECYCLE_UPDATE = "updateCallback";
+export declare const LIFECYCLE_UPDATED = "updatedCallback";
+export declare const METHOD_RENDER = "render";
+export declare const STATIC_MEMBERS = "members";
+export declare const STATIC_STYLES = "styles";
 export declare const TYPE_BOOLEAN = "boolean";
 export declare const TYPE_DATE = "date";
 export declare const TYPE_FUNCTION = "function";

package/dist/configs/constants.js

@@ -1,26 +1,25 @@
 // apis
-export const TOKEN_API = '$api';
-export const TOKEN_API_HOST = 'host';
-export const TOKEN_API_READY = 'ready';
-export const TOKEN_API_REQUEST = 'request';
+export const API_HOST = '$host$';
+export const API_READY = '$ready$';
+export const API_SETUP = '$setup$';
 // decorators
-export const TOKEN_DECORATOR_ELEMENT = 'Element';
-export const TOKEN_DECORATOR_EVENT = 'Event';
-export const TOKEN_DECORATOR_PROPERTY = 'Property';
-export const TOKEN_DECORATOR_STATE = 'State';
-export const TOKEN_DECORATOR_METHOD = 'Method';
+export const DECORATOR_ELEMENT = 'Element';
+export const DECORATOR_EVENT = 'Event';
+export const DECORATOR_PROPERTY = 'Property';
+export const DECORATOR_STATE = 'State';
+export const DECORATOR_METHOD = 'Method';
 // lifecycle
-export const TOKEN_LIFECYCLE_ADOPTED = 'adoptedCallback';
-export const TOKEN_LIFECYCLE_CONNECTED = 'connectedCallback';
-export const TOKEN_LIFECYCLE_DISCONNECTED = 'disconnectedCallback';
-export const TOKEN_LIFECYCLE_LOADED = 'loadedCallback';
-export const TOKEN_LIFECYCLE_UPDATE = 'updateCallback';
-export const TOKEN_LIFECYCLE_UPDATED = 'updatedCallback';
+export const LIFECYCLE_ADOPTED = 'adoptedCallback';
+export const LIFECYCLE_CONNECTED = 'connectedCallback';
+export const LIFECYCLE_DISCONNECTED = 'disconnectedCallback';
+export const LIFECYCLE_LOADED = 'loadedCallback';
+export const LIFECYCLE_UPDATE = 'updateCallback';
+export const LIFECYCLE_UPDATED = 'updatedCallback';
 // methods
-export const TOKEN_METHOD_RENDER = 'render';
+export const METHOD_RENDER = 'render';
 // statics
-export const TOKEN_STATIC_MEMBERS = 'members';
-export const TOKEN_STATIC_STYLES = 'styles';
+export const STATIC_MEMBERS = 'members';
+export const STATIC_STYLES = 'styles';
 // types
 export const TYPE_BOOLEAN = 'boolean';
 export const TYPE_DATE = 'date';

package/dist/runtime/index.d.ts

@@ -1 +1 @@
-export { html, render } from 'uhtml';
+export declare const html: (template: any, ...values: any[]) => any;

package/dist/runtime/index.js

@@ -1 +1,4 @@
-export { html, render } from 'uhtml';
+import { html as core } from 'uhtml';
+export const html = (template, ...values) => {
+    return core(template, ...values);
+};

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
   "type": "module",
   "scripts": {
+    "prebuild": "npm run clean",
     "build": "tsc",
     "build:watch": "tsc -w",
     "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"
@@ -91,6 +93,7 @@
     "@trivago/prettier-plugin-sort-imports": "^3.1.1",
     "cpy": "^9.0.0",
     "prettier": "^2.5.0",
+    "rimraf": "^3.0.2",
     "vite": "^2.7.10"
   }
 }

package/dist/client/utils/api.d.ts

@@ -1,6 +0,0 @@
-export interface Api {
-    ready: boolean;
-    host(): HTMLElement;
-    request(states?: any): Promise<boolean>;
-}
-export declare const api: (target: any) => Api;

package/dist/client/utils/api.js

@@ -1,2 +0,0 @@
-import * as CONSTANTS from '../../configs/constants.js';
-export const api = (target) => target[CONSTANTS.TOKEN_API];

package/dist/client/utils/proxy.d.ts

@@ -1,4 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export declare const proxy: (Class: PlusElement) => {
-    new (): {};
-};

package/dist/client/utils/proxy.js

@@ -1,124 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { html, render } from 'uhtml';
-import * as CONSTANTS from '../../configs/constants.js';
-import { isServer } from './is-server.js';
-import { parseValue } from './parse-value.js';
-// TODO: input type
-export const proxy = (Class) => {
-    if (isServer())
-        return class {
-        };
-    let host, instance;
-    const members = Class[CONSTANTS.TOKEN_STATIC_MEMBERS] || {};
-    // TODO
-    let states;
-    let isPending = false;
-    let updatePromise;
-    const request = (state) => {
-        if (!true /*hasChange*/)
-            return;
-        states = Object.assign(Object.assign({}, (states || {})), state);
-        if (isPending)
-            return;
-        updatePromise = enqueue();
-    };
-    const enqueue = () => __awaiter(void 0, void 0, void 0, function* () {
-        isPending = true;
-        try {
-            yield updatePromise;
-        }
-        catch (error) {
-            Promise.reject(error);
-        }
-        const result = perform();
-        if (result != null)
-            yield result;
-        return !isPending;
-    });
-    const perform = () => {
-        if (!isPending)
-            return;
-        try {
-            if (true /*shouldUpdate*/) {
-                // TODO
-                // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
-                render(host.shadowRoot, () => {
-                    const markup = call(CONSTANTS.TOKEN_METHOD_RENDER);
-                    const styles = Class[CONSTANTS.TOKEN_STATIC_STYLES];
-                    if (!styles && !markup)
-                        return html ``;
-                    if (!styles)
-                        return markup;
-                    if (!markup)
-                        return html `<style>${styles}</style>`;
-                    return html `<style>${styles}</style>${markup}`;
-                });
-                // TODO
-                call(CONSTANTS.TOKEN_LIFECYCLE_UPDATED, [states]);
-                states = undefined;
-            }
-            isPending = false;
-        }
-        catch (error) {
-            isPending = false;
-            throw error;
-        }
-    };
-    const call = (key, args) => {
-        var _a;
-        return (_a = instance[key]) === null || _a === void 0 ? void 0 : _a.apply(instance, args);
-    };
-    const get = (key) => {
-        return instance[CONSTANTS.TOKEN_API][key];
-    };
-    const set = (key, value) => {
-        instance[CONSTANTS.TOKEN_API][key] = value;
-    };
-    return class extends HTMLElement {
-        constructor() {
-            var _a, _b;
-            var _c;
-            super();
-            host = this;
-            // TODO
-            instance = new Class();
-            (_a = instance[_c = CONSTANTS.TOKEN_API]) !== null && _a !== void 0 ? _a : (instance[_c] = {});
-            set(CONSTANTS.TOKEN_API_HOST, () => host);
-            set(CONSTANTS.TOKEN_API_REQUEST, request);
-            // TODO
-            (_b = instance.setup) === null || _b === void 0 ? void 0 : _b.forEach((setup) => setup.bind(instance)());
-            this.attachShadow({ mode: 'open' });
-        }
-        static get observedAttributes() {
-            return Object.keys(members).filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION);
-        }
-        adoptedCallback() {
-            call(CONSTANTS.TOKEN_LIFECYCLE_ADOPTED);
-        }
-        attributeChangedCallback(name, prev, next) {
-            const [type] = members[name];
-            instance[name] = parseValue(next, type);
-            if (!get(CONSTANTS.TOKEN_API_READY))
-                return;
-            request();
-        }
-        connectedCallback() {
-            call(CONSTANTS.TOKEN_LIFECYCLE_CONNECTED);
-            request();
-            // TODO
-            setTimeout(() => call(CONSTANTS.TOKEN_LIFECYCLE_LOADED));
-            set(CONSTANTS.TOKEN_API_READY, true);
-        }
-        disconnectedCallback() {
-            call(CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED);
-        }
-    };
-};