@transclude/create 0.4.0 → 0.6.0

package/index.js

@@ -135,9 +135,13 @@ function copy(from, to, replacements) {
   const TEXT = new Set(['.json', '.js', '.html', '.css', '.md', '.txt']);
 
   for (const rel of walk(from)) {
-    // `.gitignore` in a template would be applied to the template itself by
-    // every tool that reads one, including npm when this is packed.
-    const target = path.join(to, rel === '_gitignore' ? '.gitignore' : rel);
+    // A leading underscore stands for a dot. `.gitignore` in a template would
+    // be applied to the template itself by every tool that reads one, including
+    // npm when this is packed, and a `.vscode` directory is the same shape of
+    // problem: tooling that finds it here would treat the templates as a
+    // project. Only the first segment, so a file named `_partial.html` inside a
+    // directory keeps its name.
+    const target = path.join(to, rel.replace(/^_/, '.'));
     fs.mkdirSync(path.dirname(target), { recursive: true });
 
     if (!TEXT.has(path.extname(rel))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transclude/create",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Starts a transclude project. `npm create @transclude my-app`.",
   "keywords": [
     "transclude",

package/templates/blank/README.md

@@ -8,6 +8,16 @@ npm run dev
 A page is an `.html` file in `app/routes/`. The directory tree is the route
 table, so `app/routes/about.html` answers `/about`.
 
+Icons are SVG files in `app/icons/`, compiled into one `/icons.svg` the browser
+fetches once. A subdirectory becomes a library of its own, so an icon set you
+downloaded goes in whole. `app/elements/svg-icon.html` points at them and is
+yours to change:
+
+```html
+<svg-icon name="check"></svg-icon>
+<svg-icon library="lucide" name="check" label="Mark as done"></svg-icon>
+```
+
 | | |
 | --- | --- |
 | `npm run dev` | the dev server, with hot reload |

package/templates/blank/_vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  // A transclude `.html` file holds several script blocks that are separate
+  // modules: `<script properties>`, `<script state>`, `<script server>` and the
+  // element's own `<script>`. VS Code's built-in HTML support reads them as one
+  // JavaScript module, so two `export default` blocks are reported as "A module
+  // cannot have multiple default exports" in every element that declares props
+  // and state. The file is correct; the reader is wrong about what it is.
+  //
+  // `npm run check` and the language server in `editor/` do the real checking,
+  // and they read these files the way the compiler does.
+  "html.validate.scripts": false
+}

package/templates/blank/app/elements/svg-icon.html

@@ -0,0 +1,41 @@
+<!-- Yours. Change the sizing, add a class, delete it if you have no icons.
+     It is here so the accessibility half is right from the start, which is the
+     half that fails quietly.
+
+     Put SVG files in `app/icons/`. The build compiles them into `/icons.svg`,
+     and a subdirectory becomes a library of its own. -->
+
+<script properties>
+  export default {
+    // A directory in `app/icons/`, or `icons` for the files loose at the top.
+    // An icon set downloaded as a folder is a library named by that folder.
+    library: 'icons',
+    // A file in that library, without the extension. `check` in `lucide` draws
+    // `app/icons/lucide/check.svg`.
+    name: '',
+    // What a screen reader says. Empty means the icon repeats the text beside
+    // it, which is most icons, so it is hidden instead.
+    label: '',
+  };
+</script>
+
+<style>
+  /* No fill and no stroke here. Each symbol carries the ones its own file
+     declared, and an attribute on the symbol beats a value inherited from this
+     side. Size and color are the two this side owns: 1em follows the text, and
+     most icon sets draw with currentColor. */
+  :scope {
+    display: inline-flex;
+    vertical-align: -0.125em;
+  }
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+</style>
+
+<!-- Two spellings, because they are different elements to a screen reader.
+     `aria-hidden` and a label together leave one nothing to say, so a labelled
+     icon is not also hidden. -->
+<svg if="label" role="img" aria-label="${label}"><use href="/${library}.svg#${name}"></use></svg>
+<svg else aria-hidden="true"><use href="/${library}.svg#${name}"></use></svg>

package/templates/minimal/README.md

@@ -9,6 +9,16 @@ A page is an `.html` file in `app/routes/`. The directory tree is the route
 table, so `app/routes/about.html` answers `/about`. `_layout.html` wraps every
 page beside it and below.
 
+Icons are SVG files in `app/icons/`, compiled into one `/icons.svg` the browser
+fetches once. A subdirectory becomes a library of its own, so an icon set you
+downloaded goes in whole. `app/elements/svg-icon.html` points at them and is
+yours to change:
+
+```html
+<svg-icon name="check"></svg-icon>
+<svg-icon library="lucide" name="check" label="Mark as done"></svg-icon>
+```
+
 | | |
 | --- | --- |
 | `npm run dev` | the dev server, with hot reload |

package/templates/minimal/_vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  // A transclude `.html` file holds several script blocks that are separate
+  // modules: `<script properties>`, `<script state>`, `<script server>` and the
+  // element's own `<script>`. VS Code's built-in HTML support reads them as one
+  // JavaScript module, so two `export default` blocks are reported as "A module
+  // cannot have multiple default exports" in every element that declares props
+  // and state. The file is correct; the reader is wrong about what it is.
+  //
+  // `npm run check` and the language server in `editor/` do the real checking,
+  // and they read these files the way the compiler does.
+  "html.validate.scripts": false
+}

package/templates/minimal/app/elements/svg-icon.html

@@ -0,0 +1,41 @@
+<!-- Yours. Change the sizing, add a class, delete it if you have no icons.
+     It is here so the accessibility half is right from the start, which is the
+     half that fails quietly.
+
+     Put SVG files in `app/icons/`. The build compiles them into `/icons.svg`,
+     and a subdirectory becomes a library of its own. -->
+
+<script properties>
+  export default {
+    // A directory in `app/icons/`, or `icons` for the files loose at the top.
+    // An icon set downloaded as a folder is a library named by that folder.
+    library: 'icons',
+    // A file in that library, without the extension. `check` in `lucide` draws
+    // `app/icons/lucide/check.svg`.
+    name: '',
+    // What a screen reader says. Empty means the icon repeats the text beside
+    // it, which is most icons, so it is hidden instead.
+    label: '',
+  };
+</script>
+
+<style>
+  /* No fill and no stroke here. Each symbol carries the ones its own file
+     declared, and an attribute on the symbol beats a value inherited from this
+     side. Size and color are the two this side owns: 1em follows the text, and
+     most icon sets draw with currentColor. */
+  :scope {
+    display: inline-flex;
+    vertical-align: -0.125em;
+  }
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+</style>
+
+<!-- Two spellings, because they are different elements to a screen reader.
+     `aria-hidden` and a label together leave one nothing to say, so a labelled
+     icon is not also hidden. -->
+<svg if="label" role="img" aria-label="${label}"><use href="/${library}.svg#${name}"></use></svg>
+<svg else aria-hidden="true"><use href="/${library}.svg#${name}"></use></svg>