feat: add svelte template

webpack · jamesgeorge007 · Jul 27, 2021 · Jul 27, 2021 · Jul 27, 2021 · 1c3501a045c613a059186c6f7b0523fd9f36b760
commit 1c3501a045c613a059186c6f7b0523fd9f36b760
@@ -15,3 +15,4 @@ test/build/config/error-mjs/syntax-error.mjs
 test/build/config/error-array/webpack.config.js
 test/configtest/with-config-path/syntax-error.config.js
 packages/generators/src/utils/__tests__/recursive-parser/__testfixtures__
+packages/generators/*-template
@@ -16,3 +16,4 @@ test/build/config/error-mjs/syntax-error.mjs
 test/configtest/with-config-path/syntax-error.config.js
 packages/webpack-cli/__tests__/test-assets/.yo-rc.json
 test/build-errors/stats.json
+packages/generators/*-template
@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+public/build/bundle.*
@@ -0,0 +1,15 @@
+# 🚀 Welcome to your new awesome project!
+
+This project has been created using **webpack-cli**, you can now run
+
+```
+npm run build
+```
+
+or
+
+```
+yarn build
+```
+
+to bundle your application
@@ -0,0 +1,17 @@
+{
+  "name": "svelte-webpack-template",
+  "version": "1.0.0",
+  "devDependencies": {
+    "css-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.1.0",
+    "svelte": "^3.40.2",
+    "svelte-loader": "^3.1.2",
+    "webpack": "^5.46.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "scripts": {
+    "build": "webpack --node-env production",
+    "dev": "webpack serve"
+  }
+}
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
@@ -0,0 +1,30 @@
+<script>
+	export let name;
+</script>
+
+<main>
+	<h1>Hello {name}!</h1>
+	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+
+<style>
+	main {
+		text-align: center;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+
+	h1 {
+		color: #ff3e00;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
+	}
+
+	@media (min-width: 640px) {
+		main {
+			max-width: none;
+		}
+	}
+</style>
@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
@@ -0,0 +1,12 @@
+import './global.css';
+
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;
@@ -0,0 +1,62 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+const mode = process.env.NODE_ENV || "development";
+const isProduction = mode === "production";
+
+module.exports = {
+    entry: {
+        "build/bundle": ["./src/main.js"],
+    },
+    resolve: {
+        alias: {
+            svelte: path.dirname(require.resolve("svelte/package.json")),
+        },
+        extensions: [".mjs", ".js", ".svelte"],
+        mainFields: ["svelte", "browser", "module", "main"],
+    },
+    output: {
+        path: path.join(__dirname, "public"),
+        filename: "[name].js",
+        chunkFilename: "[name].[id].js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.svelte$/,
+                use: {
+                    loader: "svelte-loader",
+                    options: {
+                        compilerOptions: {
+                            dev: !isProduction,
+                        },
+                        emitCss: isProduction,
+                        hotReload: !isProduction,
+                    },
+                },
+            },
+            {
+                test: /\.css$/,
+                use: [MiniCssExtractPlugin.loader, "css-loader"],
+            },
+            {
+                // required to prevent errors from Svelte on Webpack 5+
+                test: /node_modules\/svelte\/.*\.mjs$/,
+                resolve: {
+                    fullySpecified: false,
+                },
+            },
+        ],
+    },
+    mode,
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+        }),
+    ],
+    devtool: isProduction ? false : "source-map",
+    devServer: {
+        contentBase: path.join(__dirname, "public"),
+        hot: true,
+    },
+};
@@ -2,17 +2,7 @@ import fs from "fs";
 import path from "path";
 import Generator from "yeoman-generator";
 
-import { getInstaller, getTemplate } from "./utils/helpers";
-
-// Helper to get the template-directory content
-
-const getFiles = (dir) => {
-    return fs.readdirSync(dir).reduce((list, file) => {
-        const filePath = path.join(dir, file);
-        const isDir = fs.statSync(filePath).isDirectory();
-        return list.concat(isDir ? getFiles(filePath) : filePath);
-    }, []);
-};
+import { getFiles, getInstaller, getTemplate } from "./utils/helpers";
 
 /**
  * Creates a Yeoman Generator that generates a project conforming

@@ -1,5 +1,7 @@
 import * as defaultHandler from "./handlers/default";
+import * as svelteHandler from "./handlers/svelte";
 
 export default {
     default: defaultHandler,
+    svelte: svelteHandler,
 };
@@ -0,0 +1,32 @@
+import path from "path";
+
+import InitGenerator from "../init-generator";
+import { getFiles } from "../utils/helpers";
+
+const templatePath = path.join(__dirname, "../../init-template/svelte");
+
+export function questions(): null {
+    // No questions
+    return;
+}
+
+/**
+ * Runs the generator from webpack-defaults
+ */
+export function generate(self: InitGenerator): void {
+    let files = [];
+    try {
+        // An array of file paths (relative to `./templates`) of files to be copied to the generated project
+        files = getFiles(templatePath);
+    } catch (error) {
+        self.utils.logger.error(`Failed to generate starter template.\n ${error}`);
+        process.exit(2);
+    }
+
+    // Copy all starter files
+    files.forEach((fileName) => {
+        // `absolute-path/to/_file.js.tpl` -> `destination-path/file.js`
+        const destFilePath = path.relative(templatePath, fileName);
+        self.fs.copyTpl(fileName, self.destinationPath(destFilePath));
+    });
+}
@@ -1,3 +1,6 @@
+import fs from "fs";
+import path from "path";
+
 import { List } from "./scaffold-utils";
 
 const regex = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
@@ -23,6 +26,15 @@ export function toUpperCamelCase(str: string): string {
         .join("");
 }
 
+// Helper to get the template-directory content
+export function getFiles(dir: string): string[] {
+    return fs.readdirSync(dir).reduce((list, file) => {
+        const filePath = path.join(dir, file);
+        const isDir = fs.statSync(filePath).isDirectory();
+        return list.concat(isDir ? getFiles(filePath) : filePath);
+    }, []);
+}
+
 export async function getInstaller(): Promise<string> {
     const installers = this.utils.getAvailableInstallers();