wrec 0.31.4 → 0.31.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a small library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.31.4",
+  "version": "0.31.6",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,12 +30,15 @@
   },
   "bin": {
     "wrec-lint": "./scripts/lint.js",
+    "wrec-scaffold": "./scripts/scaffold.js",
     "wrec-usedby": "./scripts/used-by.js"
   },
   "files": [
     "dist",
     "scripts/ast-utils.js",
     "scripts/lint.js",
+    "scripts/scaffold.js",
+    "scripts/template.ts",
     "scripts/used-by.js",
     "README.md"
   ],

package/scripts/scaffold.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+function fail(message) {
+  console.error(message);
+  process.exit(1);
+}
+
+function toClassName(tagName) {
+  return tagName
+    .split('-')
+    .filter(Boolean)
+    .map(part => part[0].toUpperCase() + part.slice(1))
+    .join('');
+}
+
+const [tagName] = process.argv.slice(2);
+
+if (!tagName) fail('usage: npx wrec-scaffold {tag-name}');
+if (!tagName.includes('-')) fail('tag name must contain at least one hyphen');
+
+const className = toClassName(tagName);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templatePath = path.join(__dirname, 'template.ts');
+const outputPath = path.resolve(process.cwd(), `${tagName}.ts`);
+
+if (fs.existsSync(outputPath)) {
+  fail(`file already exists: ${outputPath}`);
+}
+
+const template = fs.readFileSync(templatePath, 'utf8');
+const output = template
+  .replaceAll('{class}', className)
+  .replaceAll('{tag}', tagName);
+
+fs.writeFileSync(outputPath, output);

package/scripts/template.ts

@@ -0,0 +1,20 @@
+import {css, html, Wrec} from 'wrec';
+
+class {class} extends Wrec {
+  static properties = {
+    name: {type: String, value: 'World'},
+  };
+
+  static css = css`
+    p {
+      color: blue;
+      font-family: fantasy;
+    }
+  `;
+
+  static html = html`
+    <p>Hello, <span>this.name</span>!</p>
+  `;
+}
+
+{class}.define('{tag}');