diff --git a/pyscriptjs/README.md b/pyscriptjs/README.md new file mode 100644 index 0000000..5145177 --- /dev/null +++ b/pyscriptjs/README.md @@ -0,0 +1,12 @@ +# Svelte TypeScript Tailwindcss Setup + +svelte template based on the default svelte/template with enabled typescript and tailwindcss support. + +Related blogpost (on Svelte+TS+Tailwind): https://www.liip.ch/en/blog/svelte-typescript-tailwind-setup + +```bash +npx degit munxar/svelte-template my-svelte-project +cd my-svelte-project +npm i +npm run dev +``` diff --git a/pyscriptjs/package.json b/pyscriptjs/package.json new file mode 100644 index 0000000..d5889bc --- /dev/null +++ b/pyscriptjs/package.json @@ -0,0 +1,32 @@ +{ + "name": "svelte-app", + "version": "1.0.0", + "scripts": { + "build": "NODE_ENV=production rollup -c", + "dev": "rollup -c -w", + "start": "sirv public", + "validate": "svelte-check" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^17.0.0", + "@rollup/plugin-node-resolve": "^11.0.0", + "@rollup/plugin-typescript": "^8.1.0", + "@tsconfig/svelte": "^1.0.0", + "autoprefixer": "^10.2.3", + "postcss": "^8.2.4", + "rollup": "^2.3.4", + "rollup-plugin-css-only": "^3.1.0", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-svelte": "^7.0.0", + "rollup-plugin-terser": "^7.0.0", + "svelte": "^3.0.0", + "svelte-check": "^1.0.0", + "svelte-preprocess": "^4.6.3", + "tailwindcss": "^2.0.2", + "tslib": "^2.0.0", + "typescript": "^4.1.3" + }, + "dependencies": { + "sirv-cli": "^1.0.0" + } +} diff --git a/pyscriptjs/rollup.config.js b/pyscriptjs/rollup.config.js new file mode 100644 index 0000000..8bb6116 --- /dev/null +++ b/pyscriptjs/rollup.config.js @@ -0,0 +1,74 @@ +import svelte from "rollup-plugin-svelte"; +import commonjs from "@rollup/plugin-commonjs"; +import resolve from "@rollup/plugin-node-resolve"; +import livereload from "rollup-plugin-livereload"; +import { terser } from "rollup-plugin-terser"; +import sveltePreprocess from "svelte-preprocess"; +import typescript from "@rollup/plugin-typescript"; +import css from "rollup-plugin-css-only"; + +const production = !process.env.ROLLUP_WATCH; + +function serve() { + let server; + + function toExit() { + if (server) server.kill(0); + } + + return { + writeBundle() { + if (server) return; + server = require("child_process").spawn( + "npm", + ["run", "start", "--", "--dev"], + { + stdio: ["ignore", "inherit", "inherit"], + shell: true, + } + ); + + process.on("SIGTERM", toExit); + process.on("exit", toExit); + }, + }; +} + +export default { + input: "src/main.ts", + output: { + sourcemap: true, + format: "iife", + name: "app", + file: "public/build/bundle.js", + }, + plugins: [ + svelte({ + // add postcss config with tailwind + preprocess: sveltePreprocess({ + postcss: { + plugins: [require("tailwindcss"), require("autoprefixer")], + }, + }), + compilerOptions: { + dev: !production, + }, + }), + css({ output: "bundle.css" }), + resolve({ + browser: true, + dedupe: ["svelte"], + }), + commonjs(), + typescript({ + sourceMap: !production, + inlineSources: !production, + }), + !production && serve(), + !production && livereload("public"), + production && terser(), + ], + watch: { + clearScreen: false, + }, +}; diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte new file mode 100644 index 0000000..077ecac --- /dev/null +++ b/pyscriptjs/src/App.svelte @@ -0,0 +1,16 @@ + + + + +
+
+ +
+ +
\ No newline at end of file diff --git a/pyscriptjs/src/Header.svelte b/pyscriptjs/src/Header.svelte new file mode 100644 index 0000000..237c517 --- /dev/null +++ b/pyscriptjs/src/Header.svelte @@ -0,0 +1,133 @@ + + + \ No newline at end of file diff --git a/pyscriptjs/src/Main.svelte b/pyscriptjs/src/Main.svelte new file mode 100644 index 0000000..f7a9ab5 --- /dev/null +++ b/pyscriptjs/src/Main.svelte @@ -0,0 +1,15 @@ + +
+
+

Dashboard

+
+
+
+
+ +
+
+
+ +
+
\ No newline at end of file diff --git a/pyscriptjs/src/Tailwind.svelte b/pyscriptjs/src/Tailwind.svelte new file mode 100644 index 0000000..aedc87d --- /dev/null +++ b/pyscriptjs/src/Tailwind.svelte @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts new file mode 100644 index 0000000..83bc6ab --- /dev/null +++ b/pyscriptjs/src/main.ts @@ -0,0 +1,7 @@ +import App from "./App.svelte"; + +const app = new App({ + target: document.body, +}); + +export default app; diff --git a/pyscriptjs/tailwind.config.js b/pyscriptjs/tailwind.config.js new file mode 100644 index 0000000..a5386f1 --- /dev/null +++ b/pyscriptjs/tailwind.config.js @@ -0,0 +1,24 @@ +const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles"); + +module.exports = { + purge: { + content: ["src/**/*.svelte", "public/index.html"], + options: { + defaultExtractor: (content) => [ + ...tailwindExtractor(content), + ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map( + ([_match, group, ..._rest]) => group + ), + ], + keyframes: true, + }, + }, + darkMode: false, // or 'media' or 'class' + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +}; diff --git a/pyscriptjs/tsconfig.json b/pyscriptjs/tsconfig.json new file mode 100644 index 0000000..b082e96 --- /dev/null +++ b/pyscriptjs/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + + "include": ["src/**/*"], + "exclude": ["node_modules/*", "__sapper__/*", "public/*"] +} \ No newline at end of file