custom-elements-ts 0.0.17 → 0.2.0

package/tests/watch.spec.ts

@@ -0,0 +1,183 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { CustomElement, Prop, Toggle, Watch } from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'watch-element',
+  template: '<span>my element</span>',
+  style: ':host{border:0}',
+})
+class WatchElement extends HTMLElement {
+  @Prop() name: any;
+
+  @Watch('name')
+  setSpan(value: any) {
+    const span = this.shadowRoot!.querySelector('span');
+    span!.innerHTML = value.new;
+  }
+
+  set label(value: any) {
+    this.setAttribute('label', value);
+  }
+  get label(): any {
+    return this.getAttribute('label') || '';
+  }
+
+  newLabel = '';
+  @Watch('label')
+  setLabel(value: any) {
+    this.newLabel = value.new;
+  }
+
+  newColor = '';
+  @Prop() color = 'blue';
+  initialColor = '';
+  @Watch('color')
+  changeColor(value: any) {
+    this.initialColor ||= value.new;
+    this.newColor = this.color;
+  }
+
+  caseChanged = false;
+  @Prop() setCase: any;
+  @Watch('setCase')
+  changeCase(value: any) {
+    this.caseChanged = this.setCase === value.new;
+  }
+
+  @Watch('set-kebab')
+  changeKebabCase(value: any) {
+    this.caseChanged = this.setCase === value.new;
+  }
+
+  menuChanged = false;
+  @Prop() menus = 'a';
+  @Watch('menus')
+  changeMenus(value: any) {
+    this.menuChanged = this.menus === value.new;
+  }
+
+  enabledChanged = false;
+  @Toggle() enabled: any;
+  @Watch('enabled')
+  changeEnable(value: any) {
+    this.enabledChanged = this.enabled.toString() === value.new;
+  }
+}
+
+describe('watch decorator', () => {
+  let myElementInstance: any;
+
+  beforeEach(() => {
+    const myElement = document.createElement('watch-element');
+    myElementInstance = document.body.appendChild(myElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should re-render setting property', () => {
+    myElementInstance.name = 'Aivan';
+    expect(myElementInstance.shadowRoot.querySelector('span').innerHTML).toEqual('Aivan');
+  });
+
+  it('should call method decorated with @Watch on prop change', () => {
+    const watchSpy = vi.spyOn(myElementInstance, 'setSpan');
+    myElementInstance.name = 'Aivan';
+    expect(watchSpy).toHaveBeenCalled();
+  });
+
+  it('should call method decorated with @Watch on prop change', () => {
+    const watchSpy = vi.spyOn(myElementInstance, 'setSpan');
+    myElementInstance.setAttribute('name', 'Mario');
+    expect(watchSpy).toHaveBeenCalledWith(...[{ old: null, new: 'Mario' }]);
+    expect(myElementInstance.name).toEqual('Mario');
+  });
+
+  it('should call @Watch on attribute change with new property value', () => {
+    myElementInstance.setAttribute('color', 'red');
+    expect(myElementInstance.newColor).toEqual('red');
+  });
+
+  it('should call @Watch for initial kebab-resolved default prop value', () => {
+    expect(myElementInstance.initialColor).toEqual('blue');
+  });
+
+  it('should call @Watch for plain get/set with correct value.new', () => {
+    myElementInstance.setAttribute('label', 'Name');
+    expect(myElementInstance.newLabel).toEqual('Name');
+  });
+
+  it('should call non kebab @Watch on kebab attribute change with new property value', () => {
+    myElementInstance.setAttribute('set-case', 'kebab');
+    expect(myElementInstance.setCase).toEqual('kebab');
+    expect(myElementInstance.caseChanged).toBeTruthy();
+  });
+
+  it('should call kebab @Watch on kebab attribute change with new property value', () => {
+    myElementInstance.setAttribute('set-case', 'snake');
+    expect(myElementInstance.setCase).toEqual('snake');
+    expect(myElementInstance.caseChanged).toBeTruthy();
+  });
+
+  it('should call @Watch on property change with new property value', () => {
+    const menus = [
+      {
+        text: 'Colors',
+        link: '/user-interface/style-guides/colors',
+      },
+      {
+        text: 'Logo',
+        link: '/user-interface/style-guides/logo',
+      },
+    ];
+    myElementInstance.menus = menus;
+    expect(myElementInstance.menus).toEqual(menus);
+    expect(myElementInstance.menuChanged).toBeTruthy();
+  });
+
+  it('should call @Watch on toggle attribute with new property value', () => {
+    myElementInstance.enabled = true;
+    expect(myElementInstance.enabledChanged).toBeTruthy();
+  });
+
+  it('should register watch metadata on the constructor for all watched attributes', () => {
+    const meta = (WatchElement as any).watchAttributes as Record<string, string>;
+    const propsInit = (WatchElement as any).propsInit as Record<string, unknown>;
+
+    expect(meta['name']).toBe('setSpan');
+    expect(meta['label']).toBe('setLabel');
+    expect(meta['color']).toBe('changeColor');
+    // camelCase key is kebab-cased in metadata
+    expect(meta['set-case']).toBe('changeCase');
+    // kebab key is preserved
+    expect(meta['set-kebab']).toBe('changeKebabCase');
+    expect(meta['menus']).toBe('changeMenus');
+    expect(meta['enabled']).toBe('changeEnable');
+
+    // propsInit entries are created (null placeholders)
+    ['name', 'label', 'color', 'setCase', 'set-kebab', 'menus', 'enabled'].forEach((k) => {
+      expect(propsInit).toHaveProperty(k);
+    });
+  });
+});
+
+// Ensure subsequent @Watch registrations on the same attribute update the mapping (last one wins)
+@CustomElement({
+  tag: 'dupe-watch-element',
+  template: '<span>dupe</span>',
+})
+class DupeWatchElement extends HTMLElement {
+  @Watch('foo')
+  first(_v: any) {}
+
+  @Watch('foo')
+  second(_v: any) {}
+}
+
+describe('watch decorator duplicate attribute handling', () => {
+  it('last @Watch for same attribute should win in metadata map', () => {
+    const meta = (DupeWatchElement as any).watchAttributes as Record<string, string>;
+    expect(meta['foo']).toBe('second');
+  });
+});

package/tools/build.js

@@ -0,0 +1,128 @@
+const { execSync } = require('child_process');
+const { existsSync, mkdirSync, copyFileSync } = require('fs');
+const path = require('path');
+const { config, ELEMENT_NAME } = require('./rollup-config');
+const rollup = require('rollup');
+const rimraf = require('rimraf');
+const { copyFile } = require('fs').promises;
+const glob = require('glob');
+const { readFileSync, writeFileSync } = require('fs');
+const { generateSources } = require('./generate-sources');
+
+const DEST_PATH = 'dist';
+// Inline demo sources so sibling demo imports resolve.
+const SRC_PATH = `demos/**/*.ts`;
+const SRC_TMP_PATH = `.tmp`;
+
+const STATIC_ASSET_EXTS = new Set([
+  '.css', '.svg', '.png', '.jpg', '.jpeg', '.gif',
+  '.ico', '.webp', '.woff', '.woff2', '.ttf', '.otf',
+  '.txt'
+]);
+
+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);
+  }
+}
+
+function copyDemoShell() {
+  if (!existsSync(DEST_PATH)) mkdirSync(DEST_PATH, { recursive: true });
+  const indexSrc = `demos/${ELEMENT_NAME}/index.html`;
+  if (existsSync(indexSrc)) {
+    const pkg = JSON.parse(readFileSync('package.json', 'utf-8'));
+    let html = readFileSync(indexSrc, 'utf-8');
+    // Keep the landing page's version badge in sync with package.json.
+    html = html.replace(
+      /<span class="badge">v[^<]*<\/span>/,
+      `<span class="badge">v${pkg.version}</span>`
+    );
+    writeFileSync(path.join(DEST_PATH, 'index.html'), html);
+  }
+  copyStaticAssets(`demos/${ELEMENT_NAME}`, DEST_PATH);
+}
+
+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 = path.relative('demos', file);
+    const destFile = path.join(destPath, relativePath);
+    const destDir = path.dirname(destFile);
+    
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+    
+    // Inline templateUrl and styleUrl references
+    content = inlineTemplates(content, path.dirname(file));
+    
+    writeFileSync(destFile, content);
+  }
+}
+
+function inlineTemplates(content, basePath) {
+  // Match templateUrl: './file.html'
+  const templateUrlRegex = /templateUrl:\s*['"`]([^'"`]+)['"`]/g;
+  content = content.replace(templateUrlRegex, (match, filePath) => {
+    const fullPath = path.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 = path.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);
+}
+
+Promise.all([clean(DEST_PATH), clean(SRC_TMP_PATH)])
+  .then(() => inlineSources(SRC_PATH, SRC_TMP_PATH))
+  .then(() => generateSources(SRC_TMP_PATH))
+  .then(() => rollupGenerate(config))
+  .then(() => copyDemoShell())
+  .catch(err => {
+    console.error('Build failed:', err);
+    process.exit(1);
+  });

package/tools/bundle.js

@@ -0,0 +1,167 @@
+const path = require('path');
+const rollup = require('rollup');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const typescript = require('rollup-plugin-typescript2');
+const ts = require('typescript');
+const rimraf = require('rimraf');
+const { existsSync, mkdirSync, copyFileSync, readFileSync, writeFileSync } = require('fs');
+const MagicString = require('magic-string');
+
+const LIB_NAME = 'custom-elements-ts';
+
+// removing custom comment-strip plugin; modern toolchain handles comments safely
+
+const createConfig = () => {
+  return ['umd', 'esm5', 'esm2015'].map((format) => {
+    const tsConfig = {
+      compilerOptions: {
+        target: format.includes('esm2015') ? 'es2015' : 'es5',
+        declaration: false,
+      },
+    };
+
+    const file = format.includes('umd')
+      ? path.join('dist', 'bundles', `${LIB_NAME}.umd.js`)
+      : path.join('dist', format, `${LIB_NAME}.js`);
+
+    const formatType = format.includes('umd') ? 'umd' : 'es';
+
+    return {
+      inputOptions: {
+        treeshake: true,
+        input: 'src/index.ts',
+        plugins: [
+          typescript({
+            tsconfig: 'src/tsconfig.json',
+            tsconfigOverride: { ...tsConfig },
+            check: false,
+            cacheRoot: path.join(path.resolve(), 'node_modules/.tmp/.rts2_cache'),
+            // ensure tslib helpers are injected correctly for ES5 target
+            tslib: require.resolve('tslib'),
+          }),
+          nodeResolve(),
+        ],
+        onwarn(warning) {
+          if (warning.code === 'THIS_IS_UNDEFINED') {
+            return;
+          }
+          console.log('Rollup warning: ', warning.message);
+        },
+      },
+      outputOptions: {
+        sourcemap: true,
+        file: file,
+        name: LIB_NAME,
+        format: formatType,
+      },
+    };
+  });
+};
+
+async function clean(dir) {
+  return new Promise((resolve, reject) => {
+    rimraf(dir, (err) => {
+      if (err) reject(err);
+      else resolve();
+    });
+  });
+}
+
+async function rollupBuild(config) {
+  const bundle = await rollup.rollup(config.inputOptions);
+  await bundle.write(config.outputOptions);
+}
+
+const emitDtsFiles = () => {
+  const configPath = path.resolve('src', 'tsconfig.json');
+  const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+  if (configFile.error) {
+    throw new Error(ts.formatDiagnosticsWithColorAndContext([configFile.error], formatHost));
+  }
+
+  const parsedConfig = ts.parseJsonConfigFileContent(
+    configFile.config,
+    ts.sys,
+    path.resolve('src'),
+    {
+      declaration: true,
+      declarationDir: path.resolve('dist'),
+      emitDeclarationOnly: true,
+      outDir: path.resolve('dist'),
+      rootDir: path.resolve('src'),
+      sourceMap: false,
+    },
+    configPath
+  );
+
+  const program = ts.createProgram(parsedConfig.fileNames, parsedConfig.options);
+  const emitResult = program.emit();
+  const diagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
+  const errors = diagnostics.filter(
+    (diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error
+  );
+  if (errors.length > 0) {
+    throw new Error(ts.formatDiagnosticsWithColorAndContext(errors, formatHost));
+  }
+};
+
+const formatHost = {
+  getCanonicalFileName: (fileName) => fileName,
+  getCurrentDirectory: () => process.cwd(),
+  getNewLine: () => '\n',
+};
+
+const copyReadMe = () => {
+  if (existsSync('README.md')) {
+    copyFileSync('README.md', path.join('dist', 'README.md'));
+  }
+};
+
+const buildCopyPackageFile = (libName, paths) => {
+  const pkg = JSON.parse(readFileSync('package.json', 'utf-8'));
+  const distPkg = {
+    name: libName,
+    version: pkg.version,
+    description: pkg.description,
+    main: paths.main,
+    module: paths.module,
+    esm5: paths.esm5,
+    esm2015: paths.esm2015,
+    typings: paths.typings,
+    peerDependencies: pkg.peerDependencies,
+    repository: pkg.repository,
+    keywords: pkg.keywords,
+    author: pkg.author,
+    license: pkg.license,
+    bugs: pkg.bugs,
+    homepage: pkg.homepage,
+  };
+
+  if (!existsSync('dist')) {
+    mkdirSync('dist', { recursive: true });
+  }
+
+  if (!existsSync('dist/bundles')) {
+    mkdirSync('dist/bundles', { recursive: true });
+  }
+
+  writeFileSync(path.join('dist', 'package.json'), JSON.stringify(distPkg, null, 2));
+};
+
+const copyPkgFile = () =>
+  buildCopyPackageFile(LIB_NAME, {
+    main: `./bundles/${LIB_NAME}.umd.js`,
+    esm5: `./esm5/${LIB_NAME}.js`,
+    module: `./esm2015/${LIB_NAME}.js`,
+    esm2015: `./esm2015/${LIB_NAME}.js`,
+    typings: 'index.d.ts',
+  });
+
+Promise.all([clean('dist'), clean('.tmp')])
+  .then(() => Promise.all(createConfig().map((config) => rollupBuild(config))))
+  .then(() => emitDtsFiles())
+  .then(() => Promise.all([copyPkgFile(), copyReadMe()]))
+  .catch((err) => {
+    console.error('Bundle failed:', err);
+    process.exit(1);
+  });

package/tools/generate-sources.js

@@ -0,0 +1,76 @@
+/**
+ * Builds the source map consumed by <cts-source-viewer>.
+ */
+const path = require('path');
+const { readFileSync, writeFileSync, existsSync, mkdirSync } = require('fs');
+
+// First file is the default tab.
+const ENTRIES = [
+  {
+    slug: 'counter',
+    folder: 'demos/counter',
+    files: ['counter.element.ts'],
+  },
+  {
+    slug: 'todo-dashboard',
+    folder: 'demos/todo-dashboard',
+    files: [
+      'todo-dashboard.element.ts',
+      'todo-stats.element.ts',
+      'todo-filters.element.ts',
+      'todo-item.element.ts',
+    ],
+  },
+];
+
+const OUTPUT_REL = path.join('site', 'source-viewer', 'sources.generated.ts');
+
+function buildSourcesMap() {
+  const map = {};
+  for (const entry of ENTRIES) {
+    map[entry.slug] = entry.files
+      .map((name) => {
+        const fullPath = path.join(entry.folder, name);
+        if (!existsSync(fullPath)) {
+          console.warn(`generate-sources: missing ${fullPath}; skipping.`);
+          return null;
+        }
+        return { name, source: readFileSync(fullPath, 'utf-8') };
+      })
+      .filter(Boolean);
+  }
+  return map;
+}
+
+function renderModule(map) {
+  // JSON can be embedded directly as a TS object literal.
+  const body = JSON.stringify(map, null, 2);
+  return [
+    '// AUTO-GENERATED by tools/generate-sources.js — do not edit by hand.',
+    '// Regenerated on every build/start so the live viewer always shows',
+    '// the source that ships with the bundle.',
+    '',
+    'export interface SourceFile {',
+    '  name: string;',
+    '  source: string;',
+    '}',
+    '',
+    `export const SOURCES: Record<string, SourceFile[]> = ${body};`,
+    '',
+  ].join('\n');
+}
+
+/**
+ * @param {string} destRoot Usually `.tmp`.
+ */
+function generateSources(destRoot) {
+  const map = buildSourcesMap();
+  const outPath = path.join(destRoot, OUTPUT_REL);
+  const outDir = path.dirname(outPath);
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+  }
+  writeFileSync(outPath, renderModule(map));
+}
+
+module.exports = { generateSources, ENTRIES };

package/tools/rollup-config.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const typescript = require('rollup-plugin-typescript2');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const terserPlugin = require('@rollup/plugin-terser');
+const terser = terserPlugin.terser || terserPlugin;
+const { existsSync } = require('fs');
+
+const ELEMENT_NAME = process.argv[2];
+const DEST_PATH = 'dist';
+
+const prodModeParams = ['--prod', '--prod=true', '--prod true'];
+
+const ELEMENT_PATH = `${ELEMENT_NAME}/index.ts`;
+const INPUT_PATH = path.join('.tmp', ELEMENT_PATH);
+
+if (ELEMENT_NAME === undefined) {
+  console.log('specify which element to start');
+  console.log(' ↳  eg. npm start element-name');
+  process.exit();
+}
+
+if (!existsSync(`demos/${ELEMENT_PATH}`)) {
+  console.log('element does not exist');
+  process.exit();
+}
+
+const toPascalCase = (text) => {
+  return text.replace(/-\w/g, m => m[1].toUpperCase())
+    .replace(/^\w/, c => c.toUpperCase());
+}
+
+function isProcess(params) {
+  return params.some(param => process.argv.includes(param));
+}
+
+const config = {
+  inputOptions: {
+    treeshake: true,
+    input: INPUT_PATH,
+    plugins: [
+      typescript({
+        useTsconfigDeclarationDir: true,
+        check: false,
+        cacheRoot: path.join(path.resolve(), 'node_modules/.tmp/.rts2_cache')
+      }),
+      nodeResolve()
+    ],
+    onwarn(warning) {
+      if (warning.code === 'THIS_IS_UNDEFINED') { return; }
+      console.log("Rollup warning: ", warning.message);
+    }
+  },
+  outputOptions: {
+    sourcemap: true,
+    exports: 'named',
+    name: toPascalCase(ELEMENT_NAME),
+    file: `${DEST_PATH}/${ELEMENT_NAME}.umd.js`,
+    format: 'umd'
+  }
+};
+
+if (isProcess(prodModeParams)) {
+  const options = {
+    mangle: { keep_fnames: true }
+  };
+  config.inputOptions.plugins.push(terser(options));
+}
+
+exports.config = config;
+exports.ELEMENT_NAME = ELEMENT_NAME;