npm - @nzz/q-cli - Versions diffs - 1.5.4 → 1.6.0 - Mend

@nzz/q-cli 1.5.4 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

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

@@ -2,21 +2,29 @@
   "name": "custom-code-skeleton",
   "version": "1.0.0",
   "devDependencies": {
+    "@nzz/nzz.ch-static": "github:nzzdev/nzz.ch-static#v1.0.0",
     "@nzz/q-cli": "^1.4.11",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-html": "^0.2.3",
+    "@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": "^11.2.1",
+    "@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",
+    "postcss": "^8.3.11",
     "rollup": "^2.50.1",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
+    "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.38.2"
+    "svelte": "^3.43.1",
+    "typescript": "^4.6.4"
   },
   "scripts": {
     "update-all": "npm run build && Q update-item",
@@ -24,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,17 +1,28 @@
-import resolve from "@rollup/plugin-node-resolve";
+import * as fs from "fs";
+import * as path from "path";
+import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import buble from "@rollup/plugin-buble";
 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";
-import css from "rollup-plugin-css-only";
 import livereload from "rollup-plugin-livereload";
-import packageConfig from "./package.json";
+import scss from "rollup-plugin-scss";
+import postcss from "postcss";
+import cssnano from "cssnano";
+import autoprefixer from "autoprefixer";
 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 = [];
@@ -31,82 +42,126 @@ 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'
+              ],
+          });
+      },
   };
 }
+function getPostcssPlugins(isProduction) {
+  const postcssPlugins = [autoprefixer];
+  if (isProduction) {
+    postcssPlugins.push(cssnano);
+  }
+  return postcssPlugins;
+}
+function createOutputCssFunction() {
+  const outputCssFunction = (styles, styleNodes) => {
+    const publicDir = "public";
+    if (!fs.existsSync(publicDir)) {
+      fs.mkdirSync(publicDir);
+    }
+    fs.writeFileSync(`${publicDir}/${builtCssFilename}.css`, styles);
+  };
+  return outputCssFunction;
+}
+function getSassConfig(isProduction) {
+  const config = {
+    outputStyle: isProduction ? "compressed" : "expanded",
+    // Sourcemap generation (specifically writing the file to system) is currently not supported by rollup-plugin-sass (but soon!)
+    // See: https://github.com/thgh/rollup-plugin-scss/issues/7
+    // outFile: path.join(__dirname, "/public/default.css"), // <- Uncomment after: https://github.com/thgh/rollup-plugin-scss/issues/7
+    sourceMap: !isProduction,
+    sourceMapEmbed: !isProduction, // Remove after: https://github.com/thgh/rollup-plugin-scss/issues/7
+    failOnError: !isProduction,
+    watch: [path.join(__dirname, "/src")],
+    processor: (css) =>
+      postcss(getPostcssPlugins(isProduction))
+        .process(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),
+    output: createOutputCssFunction(),
+  };
+  return config;
+}
 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
         dev: !production,
       },
     }),
-    // we'll extract any component CSS out into
-    // a separate file - better for performance
-    css({ output: "bundle.css" }),
+    // All styles have to be written in .scss files (inside '/src')
+    // Sass files (except partials) have to be imported in main.scss file (Use '@use' instead of '@import')
+    // Partials are placed in '/src/styles' (e.g. _variables.scss, _helpers.scss)
+    // Partials are imported directly in other sass files (e.g. _variables.scss -> '@use "variables"')
+    scss({ ...getSassConfig(production) }),
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In
     // some cases you'll need additional configuration —
     // consult the documentation for details:
     // https://github.com/rollup/rollup-plugin-commonjs
-    resolve({ browser: true }),
+    nodeResolve({ browser: true }),
     commonjs(),
     // Generate a index.html file when not building for production
@@ -114,16 +169,7 @@ export default {
     // Watch the `public` directory and refresh the
     // browser on changes when not in production
-    !production && livereload("public"),
-    // If we're building for production (npm run build
-    // instead of npm run dev), transpile and minify
-    production &&
-      buble({
-        transforms: {
-          dangerousForOf: true,
-        },
-      }),
+    !production && livereload({ watch: ["public"], delay: 800 }),
     production && terser(),
   ],
   watch: {

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

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

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

@@ -2,10 +2,6 @@
   export let name;
 </script>
-<style>
-  .title {
-    color: brown;
-  }
-</style>
-<h1 class="title s-font-title">Custom Code {name}</h1>
+<div class="custom-code-item">
+  Custom Code {name}
+</div>

package/skeletons/custom-code-skeleton/src/interfaces.ts ADDED Viewed

File without changes

package/skeletons/custom-code-skeleton/src/{main-prod.js → main-prod.ts} RENAMED Viewed

@@ -1,3 +1,4 @@
 // file is used for the production since the initializing of the app will happen in Q
 import App from "./App.svelte";
+import "./main.scss";
 export default App;

package/skeletons/custom-code-skeleton/src/main.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @use "App.scss";

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

@@ -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 ADDED Viewed

@@ -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/server-skeleton/auth/routes.js CHANGED Viewed

@@ -12,9 +12,6 @@ module.exports = [
           password: Joi.string().required(),
         },
       },
-      cors: {
-        credentials: true,
-      },
     },
     handler: async (request, h) => {
       if (
@@ -33,9 +30,6 @@ module.exports = [
     method: "GET",
     config: {
       auth: "q-auth",
-      cors: {
-        credentials: true,
-      },
     },
     handler: (request, h) => {
       if (!request.auth.isAuthenticated) {
@@ -83,9 +77,6 @@ module.exports = [
           allowUnknown: true,
         },
       },
-      cors: {
-        credentials: true,
-      },
     },
     handler: async (request, h) => {
       return "ok";

package/skeletons/server-skeleton/index.js CHANGED Viewed

@@ -57,9 +57,7 @@ async function start() {
         tools: toolsConfig,
         targets: require("./config/targets.js"),
       },
-      routes: {
-        cors: true,
-      },
+      routes: {},
     };
     server = Hapi.server(hapiOptions);

package/skeletons/tool-skeleton/.nvmrc CHANGED Viewed

	@@ -1 +1 @@
1	- 14
1	+ 16

package/skeletons/tool-skeleton/.travis.yml ADDED Viewed

@@ -0,0 +1,26 @@
+dist: trusty
+sudo: true
+services:
+  - docker
+language: node_js
+node_js:
+  - "16"
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install
+before_script:
+  # TODO: Rename 'q-your-tool' to 'q-<tool-name>'
+  - DOCKER_IMAGE_NAME="q-your-tool"
+  - DOCKER_TAG=${TRAVIS_BRANCH//[^a-zA-Z0-9\_\-\.]/_}
+script:
+  - npm run build
+  - npm run test
+  - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then docker build -t $DOCKER_IMAGE_NAME:$DOCKER_TAG .; fi'
+after_success:
+  - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then echo $DOCKER_PASSWORD | docker login -u="$DOCKER_USERNAME" --password-stdin; docker tag $DOCKER_IMAGE_NAME:$DOCKER_TAG nzzonline/$DOCKER_IMAGE_NAME:$DOCKER_TAG; docker push nzzonline/$DOCKER_IMAGE_NAME:$DOCKER_TAG; fi'
+# TODO: Create token for slack notifications with the slack bot, then insert below & uncomment lines
+# notifications:
+# slack:
+# secure: <Slack-Token>

package/skeletons/tool-skeleton/.vscode/settings.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  }
+}

package/skeletons/tool-skeleton/Dockerfile CHANGED Viewed

@@ -1,5 +1,5 @@
 # Use following version of node alpine as the base image
-FROM node:14-alpine
+FROM node:16-alpine
 # Set work directory for run/cmd
 WORKDIR /app

package/skeletons/tool-skeleton/LICENSE ADDED Viewed

@@ -0,0 +1,20 @@
+MIT License
+Copyright (c) 2021 NZZ
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/skeletons/tool-skeleton/README.md CHANGED Viewed

@@ -41,7 +41,7 @@ npx @nzz/q-cli server
 Run the Q tool:
 ```
-node index.js
+npm run dev
 ```
 [to the top](#table-of-contents)

package/skeletons/tool-skeleton/index.js CHANGED Viewed

@@ -1,12 +1,7 @@
 const Hapi = require("@hapi/hapi");
 const Joi = require("joi");
-const server = Hapi.server({
-  port: process.env.PORT || 3000,
-  routes: {
-    cors: true,
-  },
-});
+const server = Hapi.server({ port: process.env.PORT || 3000 });
 server.validator(Joi);
 const routes = require("./routes/routes.js");