custom-elements-ts 0.0.16 → 0.1.0

package/tools/start.js

@@ -0,0 +1,188 @@
+const path = require('path');
+const { join } = path;
+const express = require('express');
+const { existsSync, mkdirSync, copyFileSync, readFileSync, writeFileSync, watch } = require('fs');
+const rollup = require('rollup');
+const rimraf = require('rimraf');
+const glob = require('glob');
+const { config, ELEMENT_NAME } = require('./rollup-config');
+
+const STATIC_ASSET_EXTS = new Set([
+  '.css', '.svg', '.png', '.jpg', '.jpeg', '.gif',
+  '.ico', '.webp', '.woff', '.woff2', '.ttf', '.otf'
+]);
+
+const DEST_PATH = 'dist';
+// Inline every demo source so a demo (like `site`) can freely import sibling
+// demos and have their templateUrl/styleUrl references resolved.
+const SRC_PATH = `demos/**/*.ts`;
+const SRC_TMP_PATH = `.tmp`;
+
+// Simple dev server
+class DevServer {
+  static start() {
+    const app = express();
+    const port = 3000;
+    
+    app.use(express.static(DEST_PATH));
+    
+    app.listen(port, () => {
+      console.log(`Server running at http://localhost:${port}`);
+    });
+  }
+}
+
+async function clean(dir) {
+  return new Promise((resolve, reject) => {
+    rimraf(dir, (err) => {
+      if (err) reject(err);
+      else resolve();
+    });
+  });
+}
+
+async function inlineSources(srcPattern, destPath) {
+  const files = glob.sync(srcPattern);
+  
+  if (!existsSync(destPath)) {
+    mkdirSync(destPath, { recursive: true });
+  }
+  
+  for (const file of files) {
+    let content = readFileSync(file, 'utf-8');
+    const relativePath = file.replace('demos/', '');
+    const destFile = join(destPath, relativePath);
+    const destDir = join(destPath, relativePath.split('/').slice(0, -1).join('/'));
+    
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+    
+    // Inline templateUrl and styleUrl references
+    content = inlineTemplates(content, file.split('/').slice(0, -1).join('/'));
+    
+    writeFileSync(destFile, content);
+  }
+}
+
+function inlineTemplates(content, basePath) {
+  // Match templateUrl: './file.html'
+  const templateUrlRegex = /templateUrl:\s*['"`]([^'"`]+)['"`]/g;
+  content = content.replace(templateUrlRegex, (match, filePath) => {
+    const fullPath = join(basePath, filePath);
+    if (existsSync(fullPath)) {
+      const template = readFileSync(fullPath, 'utf-8')
+        .replace(/`/g, '\\`')
+        .replace(/\$/g, '\\$');
+      return `template: \`${template}\``;
+    }
+    return match;
+  });
+  
+  // Match styleUrl: './file.scss' or './file.css'
+  const styleUrlRegex = /styleUrl:\s*['"`]([^'"`]+)['"`]/g;
+  content = content.replace(styleUrlRegex, (match, filePath) => {
+    const fullPath = join(basePath, filePath);
+    if (existsSync(fullPath)) {
+      let style = readFileSync(fullPath, 'utf-8');
+      // For SCSS files, we'd normally compile them, but for now just use as CSS
+      style = style.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+      return `style: \`${style}\``;
+    }
+    return match;
+  });
+  
+  return content;
+}
+
+async function rollupGenerate(config) {
+  const bundle = await rollup.rollup(config.inputOptions);
+  await bundle.write(config.outputOptions);
+}
+
+function copyStaticAssets(srcDir, destDir) {
+  const files = glob.sync(`${srcDir}/**/*`, { nodir: true });
+  for (const file of files) {
+    const ext = path.extname(file).toLowerCase();
+    if (!STATIC_ASSET_EXTS.has(ext)) continue;
+    const rel = path.relative(srcDir, file);
+    const dest = path.join(destDir, rel);
+    const destSubDir = path.dirname(dest);
+    if (!existsSync(destSubDir)) mkdirSync(destSubDir, { recursive: true });
+    copyFileSync(file, dest);
+  }
+}
+
+const copy = () => {
+  if (!existsSync(DEST_PATH)) {
+    mkdirSync(DEST_PATH, { recursive: true });
+  }
+  
+  // Copy polyfills to dist
+  const polyfillsDir = join(DEST_PATH, 'node_modules', '@webcomponents', 'custom-elements');
+  if (!existsSync(polyfillsDir)) {
+    mkdirSync(polyfillsDir, { recursive: true });
+  }
+  
+  const srcDir = join(polyfillsDir, 'src');
+  if (!existsSync(srcDir)) {
+    mkdirSync(srcDir, { recursive: true });
+  }
+  
+  // Copy native-shim.js
+  const nativeShimSrc = join('node_modules', '@webcomponents', 'custom-elements', 'src', 'native-shim.js');
+  const nativeShimDest = join(polyfillsDir, 'src', 'native-shim.js');
+  if (existsSync(nativeShimSrc)) {
+    copyFileSync(nativeShimSrc, nativeShimDest);
+  }
+  
+  // Copy custom-elements.min.js
+  const customElementsSrc = join('node_modules', '@webcomponents', 'custom-elements', 'custom-elements.min.js');
+  const customElementsDest = join(polyfillsDir, 'custom-elements.min.js');
+  if (existsSync(customElementsSrc)) {
+    copyFileSync(customElementsSrc, customElementsDest);
+  }
+
+  copyStaticAssets(`demos/${ELEMENT_NAME}`, DEST_PATH);
+
+  return copyFileSync(`demos/${ELEMENT_NAME}/index.html`, join(DEST_PATH, 'index.html'));
+};
+
+const fileWatcher = () => {
+  // Watch src and demos directories
+  watch('src', { recursive: true }, async (eventType, filename) => {
+    if (filename && filename.endsWith('.ts')) {
+      console.log(`File changed: ${filename}`);
+      await inlineSources(SRC_PATH, SRC_TMP_PATH);
+      await rollupGenerate(config);
+    }
+  });
+  
+  watch('demos', { recursive: true }, async (eventType, filename) => {
+    if (!filename) return;
+    const ext = path.extname(filename).toLowerCase();
+    if (ext === '.ts') {
+      console.log(`File changed: ${filename}`);
+      await inlineSources(SRC_PATH, SRC_TMP_PATH);
+      await rollupGenerate(config);
+    } else if (ext === '.html') {
+      console.log(`HTML changed: ${filename}`);
+      copy();
+    } else if (STATIC_ASSET_EXTS.has(ext)) {
+      console.log(`Asset changed: ${filename}`);
+      copyStaticAssets(`demos/${ELEMENT_NAME}`, DEST_PATH);
+    }
+  });
+}
+
+Promise.all([clean(DEST_PATH), clean(SRC_TMP_PATH)])
+  .then(() => Promise.all([inlineSources(SRC_PATH, SRC_TMP_PATH), copy()]))
+  .then(() => {
+    rollupGenerate(config);
+    DevServer.start();
+    fileWatcher();
+  })
+  .catch(err => {
+    console.error('Start failed:', err);
+    process.exit(1);
+  });

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "baseUrl": ".",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "lib": ["es5", "es6", "dom"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "paths": {
+      "custom-elements-ts": ["src/index"]
+    },
+    "removeComments": true,
+    "rootDir": ".",
+    "sourceMap": true,
+    "target": "es6"
+  },
+  "include": [
+    ".tmp/**/*",
+    "demos/**/*.ts",
+    "src/**/*.ts",
+    "tests/**/*.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

package/vite.config.mts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        experimentalDecorators: true,
+        useDefineForClassFields: false,
+        target: 'es2017',
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      'custom-elements-ts': '/src/index.ts',
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    reporters: ['verbose'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov', 'html'],
+      include: ['src/**/*.{ts,tsx,js}'],
+      exclude: ['demos/**', 'tools/**', 'tests/**', 'dist/**', 'node_modules/**']
+    },
+  },
+});
+

package/bundles/custom-elements-ts.umd.js

@@ -1,315 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (factory((global['custom-elements-ts'] = {})));
-}(this, (function (exports) { 'use strict';
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    var toKebabCase = function (str) {
-        return str
-            .replace(/([a-z])([A-Z])/g, '$1-$2')
-            .replace(/[\s_]+/g, '-')
-            .toLowerCase();
-    };
-    var toCamelCase = function (str) {
-        return str
-            .toLowerCase()
-            .replace(/(\-\w)/g, function (m) { return m[1].toUpperCase(); });
-    };
-    var toDotCase = function (str) {
-        return str.replace(/(?!^)([A-Z])/g, ' $1')
-            .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
-            .toLowerCase();
-    };
-    var tryParseInt = function (value) {
-        return (parseInt(value) == value && parseFloat(value) !== NaN) ? parseInt(value) : value;
-    };
-
-    var Listen = function (eventName, selector) {
-        return function (target, methodName) {
-            if (!target.constructor.listeners) {
-                target.constructor.listeners = [];
-            }
-            target.constructor.listeners.push({ selector: selector, eventName: eventName, handler: target[methodName] });
-        };
-    };
-    var addEventListeners = function (target) {
-        if (target.constructor.listeners) {
-            var targetRoot = target.shadowRoot || target;
-            var _loop_1 = function (listener) {
-                var eventTarget = (listener.selector)
-                    ? targetRoot.querySelector(listener.selector)
-                        ? targetRoot.querySelector(listener.selector) : null
-                    : target;
-                if (eventTarget) {
-                    eventTarget.addEventListener(listener.eventName, function (e) {
-                        listener.handler.call(target, e);
-                    });
-                }
-            };
-            for (var _i = 0, _a = target.constructor.listeners; _i < _a.length; _i++) {
-                var listener = _a[_i];
-                _loop_1(listener);
-            }
-        }
-    };
-    var Dispatch = function (eventName) {
-        return function (target, propertyName) {
-            function get() {
-                var self = this;
-                return {
-                    emit: function (options) {
-                        var evtName = (eventName) ? eventName : toDotCase(propertyName);
-                        self.dispatchEvent(new CustomEvent(evtName, options));
-                    }
-                };
-            }
-            Object.defineProperty(target, propertyName, { get: get });
-        };
-    };
-
-    var Prop = function () {
-        return function (target, propName) {
-            var attrName = toKebabCase(propName);
-            function get() {
-                if (this.props[propName]) {
-                    return this.props[propName];
-                }
-                return this.getAttribute(attrName);
-            }
-            function set(value) {
-                if (this.__connected) {
-                    var oldValue = this.props[propName];
-                    this.props[propName] = tryParseInt(value);
-                    if (typeof value != 'object') {
-                        this.setAttribute(attrName, value);
-                    }
-                    else {
-                        this.onAttributeChange(attrName, oldValue, value, false);
-                    }
-                }
-                else {
-                    if (!this.hasAttribute(toKebabCase(propName))) {
-                        this.constructor.propsInit[propName] = value;
-                    }
-                }
-            }
-            if (!target.constructor.propsInit) {
-                target.constructor.propsInit = {};
-            }
-            target.constructor.propsInit[propName] = null;
-            Object.defineProperty(target, propName, { get: get, set: set });
-        };
-    };
-    var getProps = function (target) {
-        var watchAttributes = target.constructor.watchAttributes;
-        var plainAttributes = __assign({}, watchAttributes);
-        Object.keys(plainAttributes).forEach(function (v) { return plainAttributes[v] = ''; });
-        var cycleProps = __assign({}, plainAttributes, target.constructor.propsInit);
-        return Object.keys(cycleProps);
-    };
-    var initializeProps = function (target) {
-        var watchAttributes = target.constructor.watchAttributes;
-        for (var _i = 0, _a = getProps(target); _i < _a.length; _i++) {
-            var prop = _a[_i];
-            if (watchAttributes) {
-                if (watchAttributes[toKebabCase(prop)] == null) {
-                    watchAttributes[toKebabCase(prop)] = '';
-                }
-                else {
-                    var attribValue = target.props[prop] || target.getAttribute(toKebabCase(prop));
-                    if (typeof target[watchAttributes[prop]] == 'function') {
-                        target[watchAttributes[prop]]({ new: attribValue });
-                    }
-                }
-            }
-            if (target.constructor.propsInit[prop]) {
-                if (!target.hasAttribute(toKebabCase(prop))) {
-                    target[prop] = target.constructor.propsInit[prop];
-                }
-            }
-        }
-    };
-
-    var CustomElement = function (args) {
-        return function (target) {
-            var _a;
-            var tag = args.tag || toKebabCase(target.prototype.constructor.name);
-            var customElement = (_a = (function (_super) {
-                    __extends(class_1, _super);
-                    function class_1() {
-                        var _this = _super.call(this) || this;
-                        _this.props = {};
-                        _this.showShadowRoot = args.shadow == null ? true : args.shadow;
-                        if (!_this.shadowRoot && _this.showShadowRoot) {
-                            _this.attachShadow({ mode: 'open' });
-                        }
-                        return _this;
-                    }
-                    Object.defineProperty(class_1, "observedAttributes", {
-                        get: function () {
-                            return Object.keys(this.propsInit || {}).map(function (x) { return toKebabCase(x); });
-                        },
-                        enumerable: true,
-                        configurable: true
-                    });
-                    class_1.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
-                        this.onAttributeChange(name, oldValue, newValue);
-                    };
-                    class_1.prototype.onAttributeChange = function (name, oldValue, newValue, set) {
-                        if (set === void 0) { set = true; }
-                        if (oldValue != newValue) {
-                            if (set) {
-                                this[toCamelCase(name)] = newValue;
-                            }
-                            var watchAttributes = this.constructor.watchAttributes;
-                            if (watchAttributes && watchAttributes[name]) {
-                                var methodToCall = watchAttributes[name];
-                                if (this.__connected) {
-                                    if (typeof this[methodToCall] == 'function') {
-                                        this[methodToCall]({ old: oldValue, new: newValue });
-                                    }
-                                }
-                            }
-                        }
-                    };
-                    class_1.prototype.connectedCallback = function () {
-                        this.__render();
-                        _super.prototype.connectedCallback && _super.prototype.connectedCallback.call(this);
-                        this.__connected = true;
-                        addEventListeners(this);
-                        initializeProps(this);
-                    };
-                    class_1.prototype.__render = function () {
-                        if (this.__connected)
-                            return;
-                        var template = document.createElement('template');
-                        var style = "" + (args.style ? "<style>" + args.style + "</style>" : '');
-                        template.innerHTML = "" + style + (args.template ? args.template : '');
-                        (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
-                    };
-                    return class_1;
-                }(target)),
-                _a.__connected = false,
-                _a);
-            if (!customElements.get(tag)) {
-                customElements.define(tag, customElement);
-            }
-            return customElement;
-        };
-    };
-
-    var Watch = function (attrName) {
-        return function (target, propertyName) {
-            if (!target.constructor.watchAttributes) {
-                target.constructor.watchAttributes = {};
-            }
-            target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
-            if (!target.constructor.propsInit) {
-                target.constructor.propsInit = {};
-            }
-            target.constructor.propsInit[attrName] = null;
-        };
-    };
-
-    var Toggle = function () {
-        return function (target, propName) {
-            function get() {
-                var _this = this;
-                var getAttribute = function (propName) {
-                    if (_this.hasAttribute(propName)) {
-                        var attrValue = _this.getAttribute(propName);
-                        if (/^(true|false|^$)$/.test(attrValue)) {
-                            return attrValue == 'true' || attrValue == '';
-                        }
-                        else {
-                            return false;
-                        }
-                    }
-                    return false;
-                };
-                return getAttribute(propName);
-            }
-            function set(value) {
-                var oldValue = value;
-                if (value != undefined) {
-                    switch (typeof value) {
-                        case 'boolean':
-                            break;
-                        case 'string':
-                            if (/^(true|false|^$)$/.test(value)) {
-                                value = oldValue == 'true' || oldValue == '';
-                            }
-                            else {
-                                console.warn("TypeError: Cannot set boolean toggle property '" + propName + "' to '" + value + "'");
-                                value = false;
-                            }
-                            break;
-                        default:
-                            throw ("TypeError: Cannot set boolean toggle property '" + propName + "' to '" + value + "'");
-                    }
-                }
-                if (this.__connected) {
-                    this.props[propName] = value || false;
-                    if (oldValue !== '' && oldValue !== null) {
-                        this.setAttribute(propName, value);
-                    }
-                    else {
-                        if (value) {
-                            this.setAttribute(propName, '');
-                        }
-                        else {
-                            this.removeAttribute(propName);
-                        }
-                    }
-                }
-                else {
-                    if (!this.hasAttribute(toKebabCase(propName))) {
-                        this.constructor.propsInit[propName] = value;
-                    }
-                }
-            }
-            if (!target.constructor.propsInit) {
-                target.constructor.propsInit = {};
-            }
-            target.constructor.propsInit[propName] = null;
-            Object.defineProperty(target, propName, { get: get, set: set });
-        };
-    };
-
-    exports.CustomElement = CustomElement;
-    exports.Watch = Watch;
-    exports.Prop = Prop;
-    exports.initializeProps = initializeProps;
-    exports.Toggle = Toggle;
-    exports.Listen = Listen;
-    exports.addEventListeners = addEventListeners;
-    exports.Dispatch = Dispatch;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=custom-elements-ts.umd.js.map

package/bundles/custom-elements-ts.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-elements-ts.umd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/custom-element.d.ts

@@ -1,12 +0,0 @@
-export interface CustomElementMetadata {
-    tag?: string;
-    template?: string;
-    templateUrl?: string;
-    styleUrl?: string;
-    style?: string;
-    shadow?: boolean;
-}
-export interface KeyValue {
-    [key: string]: any;
-}
-export declare const CustomElement: (args: CustomElementMetadata) => (target: any) => any;