custom-elements-ts 0.0.17 → 0.2.0

package/tools/start.js

@@ -0,0 +1,194 @@
+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 { generateSources } = require('./generate-sources');
+
+const STATIC_ASSET_EXTS = new Set([
+  '.css', '.svg', '.png', '.jpg', '.jpeg', '.gif',
+  '.ico', '.webp', '.woff', '.woff2', '.ttf', '.otf',
+  '.txt'
+]);
+
+const INLINE_SOURCE_EXTS = new Set(['.ts', '.scss']);
+
+const DEST_PATH = 'dist';
+// Inline demo sources so sibling demo imports resolve.
+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 && INLINE_SOURCE_EXTS.has(path.extname(filename).toLowerCase())) {
+      console.log(`File changed: ${filename}`);
+      await inlineSources(SRC_PATH, SRC_TMP_PATH);
+      await generateSources(SRC_TMP_PATH);
+      await rollupGenerate(config);
+    }
+  });
+  
+  watch('demos', { recursive: true }, async (eventType, filename) => {
+    if (!filename) return;
+    const ext = path.extname(filename).toLowerCase();
+    if (INLINE_SOURCE_EXTS.has(ext)) {
+      console.log(`File changed: ${filename}`);
+      await inlineSources(SRC_PATH, SRC_TMP_PATH);
+      await generateSources(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(() => generateSources(SRC_TMP_PATH))
+  .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,359 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["custom-elements-ts"] = {}));
-})(this, (function (exports) { 'use strict';
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-    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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        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);
-    };
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    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) {
-        if (typeof value === 'number' && Number.isInteger(value)) {
-            return value;
-        }
-        if (typeof value === 'string') {
-            var trimmed = value.trim();
-            if (trimmed !== '') {
-                var parsed = Number(trimmed);
-                if (Number.isInteger(parsed) && String(parsed) === trimmed) {
-                    return parsed;
-                }
-            }
-        }
-        return 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 = target;
-                if (listener.selector) {
-                    eventTarget = targetRoot.querySelector(listener.selector);
-                }
-                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() {
-                var hasOwn = Object.prototype.hasOwnProperty.call(this.props, propName);
-                if (hasOwn) {
-                    return this.props[propName];
-                }
-                return this.getAttribute(attrName);
-            }
-            function set(value) {
-                if (this.__connected) {
-                    var oldValue = this.props[propName];
-                    this.props[propName] = tryParseInt(value);
-                    var valueType = typeof value;
-                    var shouldReflect = valueType === 'string' || valueType === 'number' || valueType === 'boolean';
-                    if (shouldReflect) {
-                        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(__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)] === undefined) {
-                    watchAttributes[toKebabCase(prop)] = '';
-                }
-                else {
-                    var hasOwn = Object.prototype.hasOwnProperty.call(target.props, prop);
-                    var attribValue = hasOwn ? 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 tag = args.tag || toKebabCase(target.prototype.constructor.name);
-            var customElement = (function (_super) {
-                __extends(class_1, _super);
-                function class_1() {
-                    var _this = _super.call(this) || this;
-                    _this.__connected = false;
-                    _this.props = {};
-                    _this.showShadowRoot =
-                        args.shadow === undefined || 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: false,
-                    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) {
-                            var propName = toCamelCase(name);
-                            this[propName] = 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();
-                    var parentProto = Object.getPrototypeOf(Object.getPrototypeOf(this)) || null;
-                    if (parentProto && typeof parentProto.connectedCallback === 'function') {
-                        parentProto.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 = "".concat(args.style ? "<style>".concat(args.style, "</style>") : '');
-                    template.innerHTML = "".concat(style).concat(args.template ? args.template : '');
-                    (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
-                };
-                return class_1;
-            }(target));
-            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 (attrName) {
-                    if (_this.hasAttribute(attrName)) {
-                        var attrValue = _this.getAttribute(attrName);
-                        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 !== null && 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 '".concat(propName, "' to '").concat(value, "'"));
-                                value = false;
-                            }
-                            break;
-                        default:
-                            throw new TypeError("Cannot set boolean toggle property '".concat(propName, "' to '").concat(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.Dispatch = Dispatch;
-    exports.Listen = Listen;
-    exports.Prop = Prop;
-    exports.Toggle = Toggle;
-    exports.Watch = Watch;
-    exports.addEventListeners = addEventListeners;
-    exports.initializeProps = initializeProps;
-
-}));
-//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}