@nzz/q-cli 1.5.5 → 1.6.1

package/dev-server/server.js

@@ -5,6 +5,9 @@ const Path = require("path");
 const server = new Hapi.Server({
   port: process.env.PORT || 5000,
   routes: {
+    cors: {
+      origin: ["*"],
+    },
     files: {
       relativeTo: Path.join(__dirname, "public"),
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nzz/q-cli",
-  "version": "1.5.5",
+  "version": "1.6.1",
   "description": "Cli tool to setup new Q tools, new Q server implementations and start Q dev server to test developing Q tools",
   "main": "index.js",
   "scripts": {

package/skeletons/custom-code-skeleton/README.md

@@ -1,15 +1,26 @@
-## Get started
+## Custom code boilerplate
 
-Install the dependencies...
+Install the dependencies
 
 ```bash
 npm install
 ```
 
-...then start [Rollup](https://rollupjs.org):
+#### Running it locally
 
-```bash
-npm run dev
+Regular layout
+```
+npm start
+```
+
+Longform standard
+```
+npm run start-ls
+```
+
+Longform Visual
+```
+npm run start-lv
 ```
 
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it and see the changes in the browser.
+Navigate to [http://0.0.0.0:5555](http://0.0.0.0:5555). You should see your app running. Edit a component file in `src`, save it and see the changes in the browser.

package/skeletons/custom-code-skeleton/index.d.ts

@@ -0,0 +1,3 @@
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.svg';

package/skeletons/custom-code-skeleton/package-lock.json

@@ -11,21 +11,24 @@
         "@nzz/q-cli": "^1.4.11",
         "@rollup/plugin-commonjs": "^21.0.0",
         "@rollup/plugin-html": "^0.2.4",
+        "@rollup/plugin-image": "^2.1.1",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.5",
+        "@rollup/plugin-typescript": "^8.3.2",
         "autoprefixer": "^10.4.0",
         "cssnano": "^5.0.10",
         "npm-run-all": "^4.1.5",
+        "nzz.ch-static": "git+https://github.com/nzzdev/nzz.ch-static.git",
         "postcss": "^8.3.11",
         "rollup": "^2.50.1",
         "rollup-plugin-livereload": "^2.0.5",
         "rollup-plugin-scss": "^3.0.0",
         "rollup-plugin-svelte": "^7.1.0",
-        "rollup-plugin-svg": "^2.0.0",
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.43.4",
         "sirv-cli": "^1.0.12",
-        "svelte": "^3.43.1"
+        "svelte": "^3.43.1",
+        "typescript": "^4.6.4"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -546,6 +549,22 @@
         "rollup": "^1.20.0||^2.0.0"
       }
     },
+    "node_modules/@rollup/plugin-image": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz",
+      "integrity": "sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-json": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@@ -578,6 +597,24 @@
         "rollup": "^2.42.0"
       }
     },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.3.2.tgz",
+      "integrity": "sha512-MtgyR5LNHZr3GyN0tM7gNO9D0CS+Y+vflS4v/PHmrX17JCkHUYKvQ5jN5o3cz1YKllM3duXUqu3yOHwMPUxhDg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "resolve": "^1.17.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -2240,6 +2277,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -2478,6 +2524,12 @@
         }
       }
     },
+    "node_modules/nzz.ch-static": {
+      "version": "1.0.0",
+      "resolved": "git+ssh://git@github.com/nzzdev/nzz.ch-static.git#90992f8a37797a45d20a4fc7ed6edb8ee1991012",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
@@ -3348,31 +3400,6 @@
         "svelte": ">=3.5.0"
       }
     },
-    "node_modules/rollup-plugin-svg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz",
-      "integrity": "sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==",
-      "dev": true,
-      "dependencies": {
-        "rollup-pluginutils": "^1.3.1"
-      }
-    },
-    "node_modules/rollup-plugin-svg/node_modules/estree-walker": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
-      "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
-      "dev": true
-    },
-    "node_modules/rollup-plugin-svg/node_modules/rollup-pluginutils": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
-      "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
-      "dev": true,
-      "dependencies": {
-        "estree-walker": "^0.2.1",
-        "minimatch": "^3.0.2"
-      }
-    },
     "node_modules/rollup-plugin-terser": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
@@ -3879,6 +3906,13 @@
       "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -3888,6 +3922,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -4614,6 +4661,16 @@
       "dev": true,
       "requires": {}
     },
+    "@rollup/plugin-image": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz",
+      "integrity": "sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@rollup/plugin-json": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@@ -4637,6 +4694,16 @@
         "resolve": "^1.19.0"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.3.2.tgz",
+      "integrity": "sha512-MtgyR5LNHZr3GyN0tM7gNO9D0CS+Y+vflS4v/PHmrX17JCkHUYKvQ5jN5o3cz1YKllM3duXUqu3yOHwMPUxhDg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "resolve": "^1.17.0"
+      }
+    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -5879,6 +5946,12 @@
         "mime-db": "1.51.0"
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -6054,6 +6127,11 @@
         "commander": "^5.1.0"
       }
     },
+    "nzz.ch-static": {
+      "version": "git+ssh://git@github.com/nzzdev/nzz.ch-static.git#90992f8a37797a45d20a4fc7ed6edb8ee1991012",
+      "dev": true,
+      "from": "nzz.ch-static@git+https://github.com/nzzdev/nzz.ch-static.git"
+    },
     "object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
@@ -6659,33 +6737,6 @@
         "rollup-pluginutils": "^2.8.2"
       }
     },
-    "rollup-plugin-svg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz",
-      "integrity": "sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==",
-      "dev": true,
-      "requires": {
-        "rollup-pluginutils": "^1.3.1"
-      },
-      "dependencies": {
-        "estree-walker": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
-          "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
-          "dev": true
-        },
-        "rollup-pluginutils": {
-          "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
-          "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
-          "dev": true,
-          "requires": {
-            "estree-walker": "^0.2.1",
-            "minimatch": "^3.0.2"
-          }
-        }
-      }
-    },
     "rollup-plugin-terser": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
@@ -7068,6 +7119,13 @@
       "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
       "dev": true
     },
+    "tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true,
+      "peer": true
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -7077,6 +7135,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "dev": true
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",

package/skeletons/custom-code-skeleton/package.json

@@ -2,11 +2,16 @@
   "name": "custom-code-skeleton",
   "version": "1.0.0",
   "devDependencies": {
+    "@nzz/nzz.ch-static": "github:nzzdev/ed-tech-nzz.ch-static#v1.0.0",
     "@nzz/q-cli": "^1.4.11",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-html": "^0.2.4",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.0",
     "cssnano": "^5.0.10",
     "npm-run-all": "^4.1.5",
@@ -15,11 +20,11 @@
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.43.4",
     "sirv-cli": "^1.0.12",
-    "svelte": "^3.43.1"
+    "svelte": "^3.43.1",
+    "typescript": "^4.6.4"
   },
   "scripts": {
     "update-all": "npm run build && Q update-item",
@@ -27,9 +32,11 @@
     "update-staging": "npm run build && Q update-item -e staging",
     "update-test": "npm run build && Q update-item -e test",
     "build": "rollup -c",
-    "autobuild": "rollup -c -w",
-    "dev": "run-p start:dev autobuild",
-    "start": "sirv public",
-    "start:dev": "sirv public --dev"
+    "start": "npm run start-regular",
+    "start-regular": "LAYOUT=regular run-p serve rollup",
+    "start-ls": "LAYOUT=longform-standard run-p serve rollup",
+    "start-lv": "LAYOUT=longform-visual run-p serve rollup",
+    "rollup": "rollup -c -w",
+    "serve": "sirv public --dev --port 5555 --host 0.0.0.0"
   }
 }

package/skeletons/custom-code-skeleton/q.config.json

@@ -4,11 +4,11 @@
       "environments": [
         {
           "name": "staging",
-          "id": ""
+          "id": "staging-id-not-set"
         },
         {
           "name": "production",
-          "id": ""
+          "id": "prod-id-not-set"
         }
       ],
       "item": {

package/skeletons/custom-code-skeleton/rollup.config.js

@@ -3,7 +3,6 @@ import * as path from "path";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
-import svg from "rollup-plugin-svg";
 import html from "@rollup/plugin-html";
 import svelte from "rollup-plugin-svelte";
 import { terser } from "rollup-plugin-terser";
@@ -12,10 +11,18 @@ import scss from "rollup-plugin-scss";
 import postcss from "postcss";
 import cssnano from "cssnano";
 import autoprefixer from "autoprefixer";
-import packageConfig from "./package.json";
 import qConfig from "./q.config.json";
+import typescript from '@rollup/plugin-typescript';
+import image from '@rollup/plugin-image';
+import alias from '@rollup/plugin-alias';
+import { createContentWidthQElement, createFullwidthQElement, getHtml, createSubtitle, createParagraph  } from '@nzz/nzz.ch-static';
+
+// Which nzz layout to use?
+const LAYOUT = process.env.LAYOUT;
+const builtCssFilename = 'bundle';
 
 const production = !process.env.ROLLUP_WATCH;
+const projectRootDir = path.resolve(__dirname);
 
 function getOutputConfigs() {
   const outputConfigs = [];
@@ -35,57 +42,42 @@ function getOutputConfigs() {
   return outputConfigs;
 }
 
-function getTemplate(options) {
-  return `<!DOCTYPE html>
-<html lang="de">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>${packageConfig.name}</title>
-    <link rel="stylesheet" href="https://context-service.st.nzz.ch/stylesheet/all/nzz.ch.css" />
-    <link rel="stylesheet" href="https://service.sophie.nzz.ch/bundle/sophie-q@^1,sophie-input@^1,sophie-font@^1,sophie-color@^1,sophie-viz-color@^1,sophie-legend@^1.css" />
-    <link rel="stylesheet" href="bundle.css" />
-  </head>
-  <!-- we have four different article templates, since the article itself has the same structure in each template
-  we can use either of these classes: regular, longformstandard, regular, opinion
-  if one changes the class attached to body tag one should change the class in section tag accordingly (maybe further adjustments needed too) -->
-  <body class="regular">
-    <div id="__nzz">
-      <div id="__layout">
-        <div class="page--article-id">
-          <div class="pageholder">
-            <div class="nzz-container">
-              <div class="nzz-page-transition">
-                <div class="article">
-                  <!-- also here change layout--{template} accordingly -->
-                  <section class="container container--article layout--regular">
-                    <!-- default = content width, for fullwidth, small left/right one has to add one of
-                      the following classes accordingly: widget--fullwidth, widget--left, widget--right-->
-                    <div class="articlecomponent q-embed widget--qembed regwalled">
-                      <div>
-                        <div class="s-q-item" id="container"></div>
-                        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,URL,Promise,fetch,URLSearchParams,Array.prototype.find,Array.prototype.findIndex,Object.entries,Array.prototype.includes,CustomEvent,Array.from,String.prototype.startsWith&flags=gated&unknown=polyfill"></script>
-                        <script src="${options.files.js[0].fileName}"></script>
-                      </div>
-                    </div>
-                  </section>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>`;
-}
-
 function getHtmlOptions() {
   return {
-    fileName: "index.html",
-    template: function (options) {
-      return getTemplate(options);
-    },
+      fileName: 'index.html',
+      template: function (options) {
+          return getHtml({
+              // These 3 options are the most important. Without them the static website will not function.
+              layout: LAYOUT, // Type of layout.
+              builtCssFilename, // Will be appended at the end of <head>.
+              builtJsFilename: options.files.js[0].fileName, // Will appended to the end of <body>.
+
+              // Create mock elements to simulate your article.
+              content: `
+                  ${createSubtitle('Test Subtitle')}
+                  ${createParagraph('Test paragraph')}
+                  ${createFullwidthQElement('custom-code-fw')}
+                  ${createContentWidthQElement('custom-code-cw')}
+              `,
+
+              // Other options.
+              author: 'Max Musterman',
+              lead: 'Test lead.',
+              title: 'Test title',
+
+              // Links to other css files that need to be loaded.
+              // Will be appended to <head> but before the bundled css file of your app.
+              customCssLinks: [
+                  'https://service.sophie.nzz.ch/bundle/sophie-q@^1,sophie-input@^1,sophie-font@^1,sophie-color@^1,sophie-viz-color@^1,sophie-legend@^1.css',
+              ],
+
+              // Links to other js filed that need to be loaded.
+              // Will be appended at the end of the body, but before the built js file for the app.
+              customJsLinks: [
+                  'https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,URL,Promise,fetch,URLSearchParams,Array.prototype.find,Array.prototype.findIndex,Object.entries,Array.prototype.includes,CustomEvent,Array.from,String.prototype.startsWith&flags=gated&unknown=polyfill'
+              ],
+          });
+      },
   };
 }
 
@@ -107,7 +99,7 @@ function createOutputCssFunction() {
       fs.mkdirSync(publicDir);
     }
 
-    fs.writeFileSync(`${publicDir}/bundle.css`, styles);
+    fs.writeFileSync(`${publicDir}/${builtCssFilename}.css`, styles);
   };
 
   return outputCssFunction;
@@ -126,8 +118,8 @@ function getSassConfig(isProduction) {
     processor: (css) =>
       postcss(getPostcssPlugins(isProduction))
         .process(css, {
-          from: path.join(__dirname, "/public/bundle.css"),
-          to: path.join(__dirname, "/public/bundle.css"),
+          from: path.join(__dirname, `/public/${builtCssFilename}.css`),
+          to: path.join(__dirname, `/public/${builtCssFilename}.css`),
           map: isProduction ? false : { inline: true }, // Set to false after: https://github.com/thgh/rollup-plugin-scss/issues/7
         })
         .then((result) => result.css),
@@ -138,11 +130,19 @@ function getSassConfig(isProduction) {
 }
 
 export default {
-  input: production ? "src/main-prod.js" : "src/main.js",
+  input: production ? "src/main-prod.ts" : "src/main.ts",
   output: getOutputConfigs(),
   plugins: [
+    alias({
+      entries: [
+        { find: '@src', replacement: path.resolve(projectRootDir, 'src') },
+        { find: '@interfaces', replacement: path.resolve(projectRootDir, 'src/interfaces.ts') },
+      ]
+    }),
+
+    typescript({ sourceMap: !production }),
     json(),
-    svg({ base64: true }),
+    image(),
     svelte({
       compilerOptions: {
         // enable run-time checks when not in production

package/skeletons/custom-code-skeleton/src/App.scss

@@ -1,3 +1,5 @@
-.app-title {
+.custom-code-item {
   color: salmon;
+  border: 1px solid #000;
+  margin-bottom: 20px;
 }

package/skeletons/custom-code-skeleton/src/App.svelte

@@ -2,4 +2,6 @@
   export let name;
 </script>
 
-<h1 class="app-title s-font-title">Custom Code {name}</h1>
+<div class="custom-code-item">
+  Custom Code {name}
+</div>

package/skeletons/custom-code-skeleton/src/main.ts

@@ -0,0 +1,18 @@
+import App from "./App.svelte";
+import "./main.scss";
+
+const app = new App({
+  target: document.querySelector("#custom-code-fw"),
+  props: {
+    name: "custom-code-skeleton - Fullwidth",
+  },
+});
+
+new App({
+  target: document.querySelector("#custom-code-cw"),
+  props: {
+    name: "custom-code-skeleton - Content Width",
+  },
+});
+
+export default app;

package/skeletons/custom-code-skeleton/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "include": ["src/**/*"],
+    "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+    "compilerOptions": {
+        "lib": ["es2015", "DOM"],
+        "types": ["svelte"],
+        "outDir": "public",
+        "declaration": false,
+        "paths": {
+            "@src": ["./src/"],
+            "@interfaces": ["./src/interfaces.ts"]
+        }
+    }
+}

package/skeletons/custom-code-skeleton/src/main.js

@@ -1,11 +0,0 @@
-import App from "./App.svelte";
-import "./main.scss";
-
-const app = new App({
-  target: document.querySelector("#container"),
-  props: {
-    name: "custom-code-skeleton",
-  },
-});
-
-export default app;