Update examples, update README documentation (#772)

* chore(examples): update example set-ups

* chore: update readme docs

examples/sapper/rollup.config.js

@@ -1,9 +1,12 @@
+import path from "path";
 import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
 import commonjs from "@rollup/plugin-commonjs";
+import url from "@rollup/plugin-url";
 import svelte from "rollup-plugin-svelte";
 import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
+import { optimizeImports } from "carbon-preprocess-svelte";
 import config from "sapper/config/rollup.js";
 import pkg from "./package.json";
 
@@ -23,13 +26,20 @@ export default {
     output: config.client.output(),
     plugins: [
       replace({
+        preventAssignment: true,
         "process.browser": true,
         "process.env.NODE_ENV": JSON.stringify(mode),
       }),
       svelte({
-        dev,
-        hydratable: true,
-        emitCss: true,
+        preprocess: [optimizeImports()],
+        compilerOptions: {
+          dev,
+          hydratable: true,
+        },
+      }),
+      url({
+        sourceDir: path.resolve(__dirname, "src/node_modules/images"),
+        publicPath: "/client/",
       }),
       resolve({
         browser: true,
@@ -42,75 +52,47 @@ export default {
           extensions: [".js", ".mjs", ".html", ".svelte"],
           babelHelpers: "runtime",
           exclude: ["node_modules/@babel/**"],
-          presets: [
-            [
-              "@babel/preset-env",
-              {
-                targets: "> 0.25%, not dead",
-              },
-            ],
-          ],
+          presets: [["@babel/preset-env", { targets: "> 0.25%, not dead" }]],
           plugins: [
             "@babel/plugin-syntax-dynamic-import",
-            [
-              "@babel/plugin-transform-runtime",
-              {
-                useESModules: true,
-              },
-            ],
+            ["@babel/plugin-transform-runtime", { useESModules: true }],
           ],
         }),
-
-      !dev &&
-        terser({
-          module: true,
-        }),
+      !dev && terser({ module: true }),
     ],
-
     preserveEntrySignatures: false,
     onwarn,
   },
-
   server: {
     input: config.server.input(),
     output: config.server.output(),
     plugins: [
       replace({
+        preventAssignment: true,
         "process.browser": false,
         "process.env.NODE_ENV": JSON.stringify(mode),
       }),
       svelte({
-        generate: "ssr",
-        hydratable: true,
-        dev,
+        preprocess: [optimizeImports()],
+        compilerOptions: {
+          dev,
+          generate: "ssr",
+          hydratable: true,
+        },
+        emitCss: false,
       }),
-      resolve({
-        dedupe: ["svelte"],
+      url({
+        sourceDir: path.resolve(__dirname, "src/node_modules/images"),
+        publicPath: "/client/",
+        emitFiles: false, // already emitted by client build
       }),
+      resolve({ dedupe: ["svelte"] }),
       commonjs(),
     ],
     external: Object.keys(pkg.dependencies).concat(
       require("module").builtinModules
     ),
-
     preserveEntrySignatures: "strict",
     onwarn,
   },
-
-  serviceworker: {
-    input: config.serviceworker.input(),
-    output: config.serviceworker.output(),
-    plugins: [
-      resolve(),
-      replace({
-        "process.browser": true,
-        "process.env.NODE_ENV": JSON.stringify(mode),
-      }),
-      commonjs(),
-      !dev && terser(),
-    ],
-
-    preserveEntrySignatures: false,
-    onwarn,
-  },
 };