From 8b9326c2ab9b63f0ed7f751788309d1a82d7307c Mon Sep 17 00:00:00 2001
From: Julian Fell <hi@jtfell.com>
Date: Thu, 1 Sep 2022 14:07:23 +1000
Subject: [PATCH] add a few commonly used things to svelte template

---
 .../project/templates/svelte/aunty.config.js  | 60 +++++++++++++++++++
 .../project/templates/svelte/src/global.scss  | 32 ++++++++++
 .../project/templates/svelte/src/index.ts     |  2 +
 3 files changed, 94 insertions(+)
 create mode 100644 src/generators/project/templates/svelte/aunty.config.js
 create mode 100644 src/generators/project/templates/svelte/src/global.scss

diff --git a/src/generators/project/templates/svelte/aunty.config.js b/src/generators/project/templates/svelte/aunty.config.js
new file mode 100644
index 0000000..2a973f0
--- /dev/null
+++ b/src/generators/project/templates/svelte/aunty.config.js
@@ -0,0 +1,60 @@
+const path = require('path');
+const fs = require('fs');
+
+// Commonly used dependencies: layercake for d3 charting, carbon-components for builder UIs
+const includedDependencies = [/layercake/, /carbon-/];
+
+const getLoaderDefinition = (config, testSourceMatch, loaderMatch) =>
+  config.module.rules
+    .find(({ test }) => test.source.indexOf(testSourceMatch) > -1)
+    .use.find(({ loader }) => loader.indexOf(loaderMatch || testSourceMatch) > -1);
+
+module.exports = {
+  type: 'svelte',
+  build: {
+    includedDependencies,
+    entry: [
+      "index"
+    ],
+  },
+  webpack: config => {
+    // De-dupe svelte
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      svelte: path.resolve('node_modules', 'svelte')
+    };
+
+    // Disable dart-sass warnings
+    getLoaderDefinition(config, 'scss', 'sass').options = { sassOptions: { quietDeps: true } };
+
+    // Disable svelte warnings when compiling dependencies
+    getLoaderDefinition(config, 'svelte').options.onwarn = (warning, handler) => {
+      for (const pattern of includedDependencies) {
+        if (pattern.test(warning.filename)) {
+          return;
+        }
+      }
+
+      handler(warning);
+    };
+
+    return config;
+  },
+  deploy: [
+    {
+      to: '/www/res/sites/news-projects/<name>/<id>'
+    },
+    config => {
+      fs.writeFileSync(
+        path.join(__dirname, 'redirect', 'index.js'),
+        `window.location = String(window.location).replace('/latest/', '/${config.id}/')`
+      );
+
+      return {
+        ...config,
+        from: 'redirect',
+        to: '/www/res/sites/news-projects/<name>/latest'
+      };
+    }
+  ]
+};
diff --git a/src/generators/project/templates/svelte/src/global.scss b/src/generators/project/templates/svelte/src/global.scss
new file mode 100644
index 0000000..6be83a7
--- /dev/null
+++ b/src/generators/project/templates/svelte/src/global.scss
@@ -0,0 +1,32 @@
+$css--font-face: false;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: false;
+$css--default-type: true;
+$css--plex: false;
+
+//
+// Uncomment these to apply the styles to carbon components:
+//
+// @import 'carbon-components/scss/globals/scss/_css--helpers.scss';
+// @import 'carbon-components/scss/globals/scss/_css--body.scss';
+// @import 'carbon-components/scss/globals/grid/_grid.scss';
+// @import 'carbon-components/scss/components/accordion/accordion';
+// @import 'carbon-components/scss/components/button/button';
+// @import 'carbon-components/scss/components/code-snippet/code-snippet';
+// @import 'carbon-components/scss/components/copy-button/copy-button';
+// @import 'carbon-components/scss/components/notification/inline-notification';
+// @import 'carbon-components/scss/components/number-input/number-input';
+// @import 'carbon-components/scss/components/radio-button/radio-button';
+// @import 'carbon-components/scss/components/popover/popover';
+// @import 'carbon-components/scss/components/tabs/tabs';
+// @import 'carbon-components/scss/components/text-input/text-input';
+// @import 'carbon-components/scss/components/tile/tile';
+// @import 'carbon-components/scss/components/select/select';
+// @import 'carbon-components/scss/components/toggle/toggle';
+
+:root {
+  --primary: #0f62fe;
+  --tint: #f4f4f4;
+}
diff --git a/src/generators/project/templates/svelte/src/index.ts b/src/generators/project/templates/svelte/src/index.ts
index e27a165..f1fcfdf 100644
--- a/src/generators/project/templates/svelte/src/index.ts
+++ b/src/generators/project/templates/svelte/src/index.ts
@@ -4,6 +4,8 @@ import { getMountValue, selectMounts } from '@abcnews/mount-utils';<% if (isTS)
 import type { Mount } from '@abcnews/mount-utils';<% } %>
 import App from './components/App/App.svelte';
 
+import './global.scss';
+
 let appMountEl<% if (isTS) { %>: Mount<% } %>;
 let appProps;