build components to umd

.gitignore

@@ -5,4 +5,5 @@ yarn-error.log
 /__sapper__/
 mmmm.code-workspace
 static/global.css
-logo.psd
+logo.psd
+dist

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"
   }
 }

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);
+};

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()
+  ]
+};

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",

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 @@
   <aside
     class={asideClasses}
     class:right-0={right}
+    class:aside={breakpoint !== "sm"}
     class:left-0={!right}
     class:pointer-events-none={!showWithScrim}
     class:z-50={showWithScrim}

src/routes/_layout.svelte

@@ -62,7 +62,8 @@
 
 {#if $bp}
   <main
-    class="container relative p-8 lg:max-w-3xl lg:ml-64 mx-auto mb-10 mt-24 md:ml-56 md:max-w-md md:px-3"
+    class="container relative p-8 lg:max-w-3xl lg:ml-64 mx-auto mb-10 mt-24
+    md:ml-56 md:max-w-md md:px-3"
     transition:fade={{ duration: 300 }}>
     <NavigationDrawer
       bind:showDesktop={$showNav}

src/utils/css-extractor.js

@@ -1,5 +1,5 @@
-import { parse, walk } from "svelte/compiler";
-import path from "path";
+const { parse, walk } = require("svelte/compiler");
+const path = require("path");
 
 function flatten(arr) {
   return arr.reduce(function(flat, toFlatten) {
@@ -41,7 +41,7 @@ function classesPerComponent(colors) {
   }, []);
 }
 
-export default function extractor(content) {
+module.exports = function extractor(content) {
   let ast;
   const usedColors = {};
 
@@ -73,4 +73,4 @@ export default function extractor(content) {
     ...fromClasses.map(c => c.replace("class:", "")),
     ...flatten(classesPerComponent(usedColors))
   ];
-}
+};

yarn.lock

@@ -940,7 +940,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000971, caniuse-lite@^1.0.30000975:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000975.tgz#d4e7131391dddcf2838999d3ce75065f65f1cdfc"
   integrity sha512-ZsXA9YWQX6ATu5MNg+Vx/cMQ+hM6vBBSqDeJs8ruk9z0ky4yIHML15MoxcFt088ST2uyjgqyUGRJButkptWf0w==
 
-chalk@^1.1.3:
+chalk@^1.0.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -1425,6 +1425,11 @@ dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -1691,6 +1696,14 @@ fastparse@^1.1.1:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
+figures@^1.0.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -1843,6 +1856,13 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
 
+gzip-size@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+  integrity sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=
+  dependencies:
+    duplexer "^0.1.1"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -2341,6 +2361,16 @@ map-age-cleaner@^0.1.1:
   dependencies:
     p-defer "^1.0.0"
 
+maxmin@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/maxmin/-/maxmin-2.1.0.tgz#4d3b220903d95eee7eb7ac7fa864e72dc09a3166"
+  integrity sha1-TTsiCQPZXu5+t6x/qGTnLcCaMWY=
+  dependencies:
+    chalk "^1.0.0"
+    figures "^1.0.1"
+    gzip-size "^3.0.0"
+    pretty-bytes "^3.0.0"
+
 mdn-data@~1.1.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
@@ -2553,7 +2583,12 @@ num2fraction@^1.2.2:
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
-object-assign@^4.0.1, object-assign@^4.1.1:
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -3210,6 +3245,13 @@ prettier@^1.18.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
   integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
 
+pretty-bytes@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-3.0.1.tgz#27d0008d778063a0b4811bb35c79f1bd5d5fbccf"
+  integrity sha1-J9AAjXeAY6C0gRuzXHnxvV1fvM8=
+  dependencies:
+    number-is-nan "^1.0.0"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -3478,6 +3520,11 @@ [email protected]:
   dependencies:
     glob "^7.1.3"
 
+rollup-plugin-analyzer@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-analyzer/-/rollup-plugin-analyzer-3.1.1.tgz#669e5fb5f5379ec4412982fa7677bb5b0ee7d6fb"
+  integrity sha512-9lW3TT1TM0L4+PBPydEcZkXzwgbJbVZe6LpSJm9einQHp9ZPCGfq1dzzAyw2GjfAytzXncKTlCdLvsrxMYqNjA==
+
 rollup-plugin-babel@^4.0.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.3.2.tgz#8c0e1bd7aa9826e90769cf76895007098ffd1413"
@@ -3486,6 +3533,14 @@ rollup-plugin-babel@^4.0.2:
     "@babel/helper-module-imports" "^7.0.0"
     rollup-pluginutils "^2.3.0"
 
+rollup-plugin-bundle-size@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-bundle-size/-/rollup-plugin-bundle-size-1.0.3.tgz#d245cd988486b4040279f9fd33f357f61673e90f"
+  integrity sha512-aWj0Pvzq90fqbI5vN1IvUrlf4utOqy+AERYxwWjegH1G8PzheMnrRIgQ5tkwKVtQMDP0bHZEACW/zLDF+XgfXQ==
+  dependencies:
+    chalk "^1.1.3"
+    maxmin "^2.1.0"
+
 rollup-plugin-commonjs@^9.1.6:
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.3.4.tgz#2b3dddbbbded83d45c36ff101cdd29e924fd23bc"