@pfern/create-elements 1.0.3 → 1.0.4

package/index.js

@@ -30,7 +30,11 @@ async function init() {
   console.log(`\nScaffolding project in ${targetDir}...`);
 
   try {
-    fs.cpSync(templateDir, targetDir, { recursive: true });
+    const ignoredDirs = new Set(['node_modules', 'dist']);
+    fs.cpSync(templateDir, targetDir, {
+      recursive: true,
+      filter: src => !ignoredDirs.has(path.basename(src)),
+    });
 
     const packageJsonPath = path.join(targetDir, 'package.json');
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
@@ -52,4 +56,3 @@ async function init() {
 }
 
 init().catch(console.error);
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfern/create-elements",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A CLI script to generate a starter app with elements.js",
   "main": "index.js",
   "keywords": [

package/template/README.md

@@ -29,3 +29,8 @@ npm test
 
 Routes are defined in `src/router.js` and used from `src/components/app.js`.
 Navigation uses the History API so the address bar stays in sync.
+
+## Linting & Formatting
+
+The rules in `eslint.config.json` are there to allow for the Formatting style
+used in the examples. Feel free to remove or edit them if preferred.

package/template/eslint.config.js

@@ -0,0 +1,71 @@
+export default [
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    rules: {
+      'array-bracket-newline': ['warn', 'consistent'],
+      'arrow-parens': ['warn', 'as-needed'],
+      'arrow-spacing': 'warn',
+      'comma-spacing': ['warn', { before: false, after: true }],
+      'comma-style': ['warn', 'last'],
+      'computed-property-spacing': ['warn', 'never'],
+      'eol-last': ['warn', 'always'],
+      'indent': ['warn', 2, {
+        CallExpression: { arguments: 'first' },
+        ImportDeclaration: 'first',
+        ObjectExpression: 'first',
+        VariableDeclarator: {
+          var: 2,
+          let: 2,
+          const: 3,
+        },
+      }],
+      'key-spacing': ['warn', { mode: 'minimum' }],
+      'linebreak-style': ['error', 'unix'],
+      'no-extra-parens': 'warn',
+      'no-multi-spaces': ['warn', {
+        ignoreEOLComments: true,
+        exceptions: { Property: false },
+      }],
+      'no-multiple-empty-lines': ['warn', { max: 2, maxEOF: 1 }],
+      'no-trailing-spaces': 'warn',
+      'no-undef': 'warn',
+      'no-unused-vars': ['warn', {
+        args: 'all',
+        varsIgnorePattern: '^_',
+        argsIgnorePattern: '^_',
+      }],
+      'object-curly-newline': ['warn', { consistent: true }],
+      'object-curly-spacing': ['warn', 'always'],
+      'operator-linebreak': ['warn', 'before', { overrides: { '=': 'ignore' } }],
+      'prefer-rest-params': 'warn',
+      'quotes': ['warn', 'single'],
+      'semi': ['warn', 'never'],
+      'sort-imports': 'warn',
+      'space-before-function-paren': ['warn', {
+        anonymous: 'never',
+        asyncArrow: 'always',
+        named: 'never',
+      }],
+      'spaced-comment': ['warn', 'always'],
+      'space-in-parens': 'warn',
+      'space-infix-ops': 'warn',
+    },
+  },
+  {
+    files: ['src/**/*.js'],
+    languageOptions: {
+      globals: {
+        console: 'readonly',
+        URL: 'readonly',
+        Event: 'readonly',
+        PopStateEvent: 'readonly',
+        document: 'readonly',
+        window: 'readonly',
+      },
+    },
+  },
+]

package/template/package.json

@@ -9,7 +9,9 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "node --test test/*.test.* --test-reporter spec"
+    "test": "node --test test/*.test.* --test-reporter spec",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "repository": {
     "type": "git",

package/template/src/components/app.js

@@ -1,14 +1,13 @@
 import { a, component, div, h2, main, nav, section } from '@pfern/elements'
+import { currentPath, go, normalizePath } from '../router.js'
 import { counter } from './counter.js'
 import { todos } from './todos.js'
-import { currentPath, go, normalizePath } from '../router.js'
 
 const link = (path, label, active) =>
-  a({
-    href: path,
-    class: active ? 'active' : '',
-    onclick: () => app(go(path, { force: true }))
-  }, label)
+  a({ href: path,
+      class: active ? 'active' : '',
+      onclick: () => app(go(path, { force: true })) },
+    label)
 
 const navbar = path =>
   nav(
@@ -23,21 +22,18 @@ const home = () =>
          and independent counters.`))
 
 const counters = () =>
-  section({ class: 'grid' },
-    div(
-      h2('Counter 1'),
-      counter()),
-    div(
-      h2('Counter 2'),
-      counter()))
+  section(
+    { class: 'grid' },
+    div(h2('Counter 1'), counter()),
+    div(h2('Counter 2'), counter()))
 
 export const app = component((path = currentPath()) => {
   path = normalizePath(path)
 
   const view =
     path === '/todos' ? todos()
-    : path === '/counters' ? counters()
-    : home()
+      : path === '/counters' ? counters()
+        : home()
 
   return main(
     navbar(path),

package/template/src/components/todos.js

@@ -15,14 +15,14 @@ export const todos = component(
 
     return (
       div({ class: 'todos' },
-
-        form({ onsubmit: add },
-          input({ name: 'todo', placeholder: 'What needs doing?' }),
-          button({ type: 'submit' }, 'Add')),
-
-        ul(...items.map(item =>
-          li({ style:
-              { 'text-decoration': item.done ? 'line-through' : 'none' } },
-            span({ onclick: () => toggle(item) }, item.value),
-            button({ onclick: () => remove(item) }, '✕'))))))})
+          form({ onsubmit: add },
+               input({ name: 'todo', placeholder: 'What needs doing?' }),
+               button({ type: 'submit' }, 'Add')),
+
+          ul(...items.map(item =>
+            li({ style:
+                 { 'text-decoration': item.done ? 'line-through' : 'none' } },
+               span({ onclick: () => toggle(item) }, item.value),
+               button({ onclick: () => remove(item) }, '✕'))))))
+  })
 

package/template/src/router.js

@@ -26,7 +26,7 @@ export const navigate = (path, { replace = false, force = false } = {}) => {
 }
 
 export const currentPath = () =>
-  (typeof window === 'undefined')
+  typeof window === 'undefined'
     ? '/'
     : window.location.pathname || '/'
 

package/template/.eslintrc.json

@@ -1,205 +0,0 @@
-{ "root": true,
-  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
-  "env": { "browser": true, "es2021": true },
-
-  "rules": {
-    "array-bracket-newline": [ "warn", "consistent" ],
-    "arrow-parens": [ "warn", "as-needed" ],
-    "arrow-spacing": "warn",
-    "comma-spacing": [ "warn", { "before": false, "after": true } ],
-    "comma-style": [ "warn", "last" ],
-    "computed-property-spacing": [ "warn", "never" ],
-    "eol-last": [ "warn", "always" ],
-    "indent": [ "warn", 2, {
-        "ImportDeclaration": "first",
-        "ObjectExpression": "first",
-        "VariableDeclarator": {
-          "var": 2,
-          "let": 2,
-          "const": 3 } } ],
-    "key-spacing": [ "warn", { "mode": "minimum" } ],
-    "linebreak-style": [ "error", "unix" ],
-    "no-extra-parens": "warn",
-    "no-multiple-empty-lines": [ "warn", { "max": 2, "maxEOF": 1 } ],
-    "no-multi-spaces": [ "warn", {
-        "ignoreEOLComments": true,
-        "exceptions": { "Property": false } } ],
-    "no-trailing-spaces": "warn",
-    "no-undef": "warn",
-    "no-unused-vars": [ "warn", {
-        "args": "all",
-        "varsIgnorePattern": "^_",
-        "argsIgnorePattern": "^_" } ],
-
-    "object-curly-newline": [ "warn", { "consistent": true } ],
-    "object-curly-spacing": [ "warn", "always" ],
-    "operator-linebreak": [ "warn", "before", {
-        "overrides": {
-          "=": "ignore" } } ],
-    "prefer-rest-params": "warn",
-    "quote-props": [ "warn", "as-needed" ],
-    "quotes": [ "warn", "single" ],
-    "semi": [ "warn", "never" ],
-    "sort-imports": "warn",
-    "space-before-function-paren": [ "warn", {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "named": "never" } ],
-    "spaced-comment": [ "warn", "always" ],
-    "space-in-parens": "warn",
-    "space-infix-ops": "warn" },
-
-  "globals": {
-    "process": "readonly",
-    "test": "readonly",
-
-    "apply": "readonly",
-    "bool": "readonly",
-    "deepMap": "readonly",
-    "each": "readonly",
-    "entries": "readonly",
-    "eq": "readonly",
-    "evaluate": "readonly",
-    "exists": "readonly",
-    "filter": "readonly",
-    "first": "readonly",
-    "globalize": "readonly",
-    "identity": "readonly",
-    "instance": "readonly",
-    "isArray": "readonly",
-    "isFunction": "readonly",
-    "join": "readonly",
-    "keys": "readonly",
-    "last": "readonly",
-    "length": "readonly",
-    "log": "readonly",
-    "omap": "readonly",
-    "omit": "readonly",
-    "partial": "readonly",
-    "push": "readonly",
-    "rest": "readonly",
-    "reverse": "readonly",
-    "slice": "readonly",
-    "split": "readonly",
-    "store": "readonly",
-    "sum": "readonly",
-    "type": "readonly",
-    "walk": "readonly",
-
-    "a": "readonly",
-    "abbr": "readonly",
-    "address": "readonly",
-    "area": "readonly",
-    "article": "readonly",
-    "aside": "readonly",
-    "audio": "readonly",
-    "b": "readonly",
-    "base": "readonly",
-    "bdi": "readonly",
-    "bdo": "readonly",
-    "blockquote": "readonly",
-    "body": "readonly",
-    "br": "readonly",
-    "button": "readonly",
-    "canvas": "readonly",
-    "caption": "readonly",
-    "cite": "readonly",
-    "code": "readonly",
-    "col": "readonly",
-    "colgroup": "readonly",
-    "data": "readonly",
-    "datalist": "readonly",
-    "dd": "readonly",
-    "del": "readonly",
-    "details": "readonly",
-    "dfn": "readonly",
-    "dialog": "readonly",
-    "div": "readonly",
-    "dl": "readonly",
-    "doctype": "readonly",
-    "dt": "readonly",
-    "el": "readonly",
-    "element": "readonly",
-    "em": "readonly",
-    "embed": "readonly",
-    "fieldset": "readonly",
-    "figcaption": "readonly",
-    "figure": "readonly",
-    "footer": "readonly",
-    "form": "readonly",
-    "fragment": "readonly",
-    "h1": "readonly",
-    "h2": "readonly",
-    "h3": "readonly",
-    "h4": "readonly",
-    "h5": "readonly",
-    "h6": "readonly",
-    "head": "readonly",
-    "header": "readonly",
-    "hgroup": "readonly",
-    "hr": "readonly",
-    "html": "readonly",
-    "i": "readonly",
-    "iframe": "readonly",
-    "img": "readonly",
-    "input": "readonly",
-    "ins": "readonly",
-    "kbd": "readonly",
-    "label": "readonly",
-    "legend": "readonly",
-    "li": "readonly",
-    "link": "readonly",
-    "main": "readonly",
-    "map": "readonly",
-    "mark": "readonly",
-    "menu": "readonly",
-    "meta": "readonly",
-    "meter": "readonly",
-    "nav": "readonly",
-    "noscript": "readonly",
-    "object": "readonly",
-    "ol": "readonly",
-    "optgroup": "readonly",
-    "option": "readonly",
-    "output": "readonly",
-    "p": "readonly",
-    "param": "readonly",
-    "picture": "readonly",
-    "pre": "readonly",
-    "progress": "readonly",
-    "q": "readonly",
-    "rp": "readonly",
-    "rt": "readonly",
-    "ruby": "readonly",
-    "s": "readonly",
-    "samp": "readonly",
-    "script": "readonly",
-    "section": "readonly",
-    "select": "readonly",
-    "slot": "readonly",
-    "small": "readonly",
-    "source": "readonly",
-    "span": "readonly",
-    "strong": "readonly",
-    "style": "readonly",
-    "sub": "readonly",
-    "summary": "readonly",
-    "sup": "readonly",
-    "table": "readonly",
-    "tbody": "readonly",
-    "td": "readonly",
-    "template": "readonly",
-    "textarea": "readonly",
-    "tfoot": "readonly",
-    "th": "readonly",
-    "thead": "readonly",
-    "time": "readonly",
-    "title": "readonly",
-    "tr": "readonly",
-    "track": "readonly",
-    "u": "readonly",
-    "ul": "readonly",
-    "var": "readonly",
-    "video": "readonly",
-    "wbr": "readonly" } }
-