From ec6f2a47d259891bd2568c2da93c1a6eed7f4286 Mon Sep 17 00:00:00 2001 From: Maxim Matyunin Date: Sun, 14 Jul 2019 20:25:10 +0900 Subject: [PATCH] build components to umd --- .gitignore | 3 +- package.json | 21 +++++-- postcss.config.js | 29 +++++++++ rollup-publish.config.js | 47 +++++++++++++++ rollup.config.js | 5 +- .../NavigationDrawer/NavigationDrawer.svelte | 3 +- src/routes/_layout.svelte | 3 +- src/utils/css-extractor.js | 8 +-- yarn.lock | 59 ++++++++++++++++++- 9 files changed, 160 insertions(+), 18 deletions(-) create mode 100644 postcss.config.js create mode 100644 rollup-publish.config.js diff --git a/.gitignore b/.gitignore index 99f6e8ac..af048088 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ yarn-error.log /__sapper__/ mmmm.code-workspace static/global.css -logo.psd \ No newline at end of file +logo.psd +dist \ No newline at end of file diff --git a/package.json b/package.json index 71cf7766..3059cdcd 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "smelte", - "description": "Material design components for Svelte using Tailwind CSS", + "description": "UI framework for Svelte using Tailwind CSS", "version": "0.0.8", "scripts": { "dev": "sapper dev -p 7777", - "build": "sapper build --legacy", + "build": "rollup -c --config rollup-publish.config.js", + "build:site": "sapper build --legacy", "export": "sapper export --legacy", "start": "node __sapper__/build", "serve": "serve __sapper__/export", @@ -13,19 +14,22 @@ "lint": "prettier --write --plugin-search-dir=. ./src/**/*", "cy:open": "cypress open", "test": "run-p --race dev cy:run", - "now": "yarn build && now", + "now": "yarn build:site && now", "now-build": "sapper build --export" }, "pre-commit": [ "lint" ], + "files": [ + "dist", + "src" + ], + "module": "dist/module.js", + "main": "dist/index.js", "browserslist": "last 3 version", "svelte": "src/index.js", "dependencies": { - "compression": "^1.7.1", - "express": "^4.17.1", "postcss-nesting": "^7.0.0", - "sirv": "^0.4.0", "svelte": "^3.6.7", "svelte-waypoint": "^0.1.2", "tailwindcss": "^1.0.1", @@ -41,9 +45,11 @@ "@fullhuman/postcss-purgecss": "^1.2.0", "@now/node": "^0.9.0", "autoprefixer": "^9.5.1", + "compression": "^1.7.1", "cssnano": "^4.1.10", "eslint": "^6.0.1", "eslint-plugin-svelte3": "^2.1.0", + "express": "^4.17.1", "npm-run-all": "^4.1.5", "postcss": "^7.0.16", "postcss-import": "^12.0.1", @@ -54,7 +60,9 @@ "prettier-plugin-svelte": "^0.6.0", "prismjs": "^1.16.0", "rollup": "^1.0.0", + "rollup-plugin-analyzer": "^3.1.1", "rollup-plugin-babel": "^4.0.2", + "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-commonjs": "^9.1.6", "rollup-plugin-includepaths": "^0.2.3", "rollup-plugin-json": "^4.0.0", @@ -65,6 +73,7 @@ "rollup-plugin-svelte": "^5.0.1", "rollup-plugin-terser": "^4.0.4", "sapper": "^0.27.0", + "sirv": "^0.4.0", "svelte-preprocess": "^2.9.0" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..dc79d0a4 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,29 @@ +const extractor = require("./src/utils/css-extractor.js"); + +module.exports = (purge = false) => { + return [ + require("postcss-import")(), + require("postcss-url")(), + require("postcss-nesting")(), + require("postcss-input-range")(), + require("autoprefixer")(), + require("tailwindcss")("./tailwind.config.js"), + purge && + require("cssnano")({ + preset: "default" + }), + purge && + require("@fullhuman/postcss-purgecss")({ + content: ["./**/*.svelte"], + extractors: [ + { + extractor, + extensions: ["svelte"] + } + ], + whitelist: ["html", "body", "stroke-primary"], + // for Prismjs code highlighting + whitelistPatterns: [/language/, /namespace/, /token/] + }) + ].filter(Boolean); +}; diff --git a/rollup-publish.config.js b/rollup-publish.config.js new file mode 100644 index 00000000..3da9b4de --- /dev/null +++ b/rollup-publish.config.js @@ -0,0 +1,47 @@ +import analyze from "rollup-plugin-analyzer"; +import autoPreprocess from "svelte-preprocess"; +import bundleSize from "rollup-plugin-bundle-size"; +import commonjs from "rollup-plugin-commonjs"; +import resolve from "rollup-plugin-node-resolve"; +import svelte from "rollup-plugin-svelte"; +import { terser } from "rollup-plugin-terser"; +import pkg from "./package.json"; + +const production = !process.env.ROLLUP_WATCH; + +const { name } = pkg; + +export default { + input: "src/index.js", + output: [ + { + file: pkg.module, + format: "es", + sourcemap: true, + name + }, + { + file: pkg.main, + format: "umd", + sourcemap: true, + name + } + ], + plugins: [ + svelte({ + dev: !production, + hydratable: true, + + preprocess: autoPreprocess({ + postcss: { + plugins: require("./postcss.config.js")(true) + } + }) + }), + resolve(), + commonjs(), + production && terser(), + production && analyze(), + production && bundleSize() + ] +}; diff --git a/rollup.config.js b/rollup.config.js index aec38440..bd60f3c8 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -10,7 +10,6 @@ import config from "sapper/config/rollup.js"; import getPreprocessor from "svelte-preprocess"; import postcss from "rollup-plugin-postcss"; import includePaths from "rollup-plugin-includepaths"; -import extractor from "./src/utils/css-extractor.js"; import path from "path"; const mode = process.env.NODE_ENV; const dev = mode === "development"; @@ -62,7 +61,7 @@ export default { "process.env.NODE_ENV": JSON.stringify(mode) }), json({ - includes: "**./*.json", + includes: "**./*.json" }), string({ include: "**/*.txt" @@ -128,7 +127,7 @@ export default { "process.env.NODE_ENV": JSON.stringify(mode) }), json({ - includes: "**./*.json", + includes: "**./*.json" }), svelte({ generate: "ssr", diff --git a/src/components/NavigationDrawer/NavigationDrawer.svelte b/src/components/NavigationDrawer/NavigationDrawer.svelte index 645996cd..ddb5e85d 100644 --- a/src/components/NavigationDrawer/NavigationDrawer.svelte +++ b/src/components/NavigationDrawer/NavigationDrawer.svelte @@ -9,7 +9,7 @@ export let showMobile = false; export let showDesktop = true; export let breakpoint = ""; - export let asideClasses = "aside fixed top-0 md:mt-16 w-auto drawer overflow-hidden"; + export let asideClasses = "fixed top-0 md:mt-16 w-auto drawer overflow-hidden"; export let navClasses = `h-full bg-white absolute flex w-auto z-20 drawer pointer-events-auto overflow-y-scroll`; @@ -59,6 +59,7 @@