Add a svelte client app from graph-paper-org/app-template

client/.circleci/config.yml

@@ -0,0 +1,17 @@
+version: 2.1
+orbs:
+  node: circleci/node@2.0.1
+jobs:
+  build-and-test:
+    executor:
+      name: node/default
+      tag: "12.16"
+    steps:
+      - checkout
+      - node/install-packages
+      - run: npm install
+      - run: npm test
+workflows:
+  build-and-test:
+    jobs:
+      - build-and-test

client/.dependabot/config.yml

@@ -0,0 +1,9 @@
+version: 1
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "weekly"
+    automerged_updates:
+      - match:
+          dependency_type: "all"
+          update_type: "semver:minor"

client/.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+trim_trailing_whitespace = true
+
+indent_style = space
+indent_size = 2
+
+# Unix line endings
+end_of_line = lf
+insert_final_newline = true
+
+[*.py]
+indent_size = 4
+
+[Makefile]
+indent_style = tab

client/.eslintignore

@@ -0,0 +1,4 @@
+# Inverse matches (i.e., DO NOT ignore these)
+!.prettierrc.js
+
+public/build/bundle.js

client/.eslintrc.js

@@ -0,0 +1,69 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2019,
+    sourceType: "module",
+  },
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ["airbnb-base"],
+  plugins: ["jest", "svelte3"],
+  rules: {
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
+    "no-param-reassign": [
+      "error",
+      { props: true, ignorePropertyModificationsFor: ["draft"] },
+    ],
+  },
+  overrides: [
+    {
+      files: ["**/*.js"],
+      extends: ["prettier"],
+      plugins: ["prettier"],
+      rules: {
+        "prettier/prettier": "error",
+      },
+    },
+    {
+      files: ["**/*.svelte"],
+      processor: "svelte3/svelte3",
+
+      // Turn off all rules that might conflict with Prettier.[1] Note that this
+      // does not warn if a Svelte file disobeys Prettier rules. That's what the
+      // Prettier *plugin* does, but at the time of this writing, the
+      // eslint-plugin-svelte3 plugin discourages the use of the Prettier
+      // plugin for Svelte files.[2]
+      //
+      // [1] https://github.com/prettier/eslint-config-prettier
+      // [2] https://github.com/sveltejs/eslint-plugin-svelte3/blob/6900d670c9e85509b2d21decd91f1e75f7934596/OTHER_PLUGINS.md#eslint-plugin-prettier
+      extends: ["prettier"],
+
+      rules: {
+        "prefer-const": "off",
+
+        // Disable rules that do not work correctly with eslint-plugin-svelte3
+        //
+        // https://github.com/sveltejs/eslint-plugin-svelte3/blob/6900d670c9e85509b2d21decd91f1e75f7934596/OTHER_PLUGINS.md#eslint-plugin-import
+        "import/first": "off",
+        "import/no-duplicates": "off",
+        "import/no-mutable-exports": "off",
+        "import/no-unresolved": "off",
+
+        // Temporarily work around a bug in eslint-plugin-svelte3.
+        //
+        // https://github.com/sveltejs/eslint-plugin-svelte3/issues/41#issuecomment-572503966
+        "no-multiple-empty-lines": ["error", { max: 2, maxBOF: 2, maxEOF: 0 }],
+      },
+    },
+    {
+      files: ["tests/**/*.test.js"],
+      plugins: ["jest"],
+      extends: ["plugin:jest/recommended", "plugin:jest/style"],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

client/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+public/build/*

client/.prettierignore

@@ -0,0 +1,2 @@
+public/build/bundle.js
+public/build/bundle.css

client/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // Hard-wrap Markdown
+  proseWrap: "always",
+};

client/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ["../stories/**/*.stories.js"],
+  addons: ["@storybook/addon-knobs"],
+};

client/.storybook/preview.js

@@ -0,0 +1 @@
+import "./story.css";

client/docs/development.md

@@ -0,0 +1,34 @@
+## Development
+
+First, run `npm install` to install all dependencies.
+
+Then, run `npm run dev` to run this project in development mode. Run
+`npm run storybook` to run Storybook, which demonstrates how components can be
+used.
+
+### Code quality
+
+To automatically benefit from the code quality tools that are included with this
+project, use an editor (such as
+[Visual Studio Code](https://code.visualstudio.com/)) with plugins for
+[EditorConfig](https://editorconfig.org/), [ESLint](https://eslint.org/),
+[Prettier](https://prettier.io/), and [Svelte](https://svelte.dev/).
+
+When installed correctly, these plugins will warn you when your code contains
+potential problems or when it's formatted inconsistently. If you choose to, you
+can also configure your editor to automatically format files with Prettier upon
+save.
+
+Even with these plugins, you may want to run `npm run format` and `npm test`
+before sharing your code to be sure that you didn't miss anything. Also, be
+aware that Prettier and its plugins can rarely break existing code. You may want
+to double-check that everything works after running `npm run format` just in
+case.
+
+## Deployment
+
+As for development, run `npm install` to install all dependencies.
+
+Then, run `npm run build` to build this project for production deployment. After
+it's built, host the _public_ directory on a static server or use `npm start` to
+serve it with Node.

client/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "etl-graph",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup --config",
+    "build-storybook": "build-storybook --static-dir ./public --config-dir .storybook",
+    "dev": "rollup --config --watch",
+    "format": "prettier --plugin-search-dir=. --write .",
+    "format:check": "prettier --plugin-search-dir=. --check .",
+    "lint": "eslint --ext .js,.svelte .",
+    "start": "sirv public",
+    "storybook": "start-storybook --static-dir ./public -p 6006",
+    "test": "npm-run-all format:check lint test:jest",
+    "test:jest": "jest tests --no-cache"
+  },
+  "devDependencies": {
+    "@babel/core": "7.10.2",
+    "@babel/plugin-transform-runtime": "7.10.1",
+    "@babel/preset-env": "7.10.2",
+    "@rollup/plugin-commonjs": "13.0.0",
+    "@rollup/plugin-node-resolve": "8.0.1",
+    "@storybook/addon-knobs": "5.3.19",
+    "@storybook/addon-storysource": "5.3.19",
+    "@storybook/svelte": "5.3.19",
+    "babel-loader": "8.1.0",
+    "eslint": "7.2.0",
+    "eslint-config-airbnb-base": "14.2.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-import": "2.21.2",
+    "eslint-plugin-jest": "23.13.2",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-svelte3": "2.7.3",
+    "jest": "26.0.1",
+    "lerna": "3.22.1",
+    "npm-run-all": "4.1.5",
+    "page": "1.11.6",
+    "prettier": "2.0.5",
+    "prettier-plugin-svelte": "1.1.0",
+    "rollup": "2.16.1",
+    "rollup-plugin-livereload": "1.3.0",
+    "rollup-plugin-postcss": "3.1.2",
+    "rollup-plugin-svelte": "5.2.2",
+    "rollup-plugin-terser": "6.1.0",
+    "svelte": "3.23.2",
+    "svelte-loader": "2.13.6"
+  },
+  "dependencies": {
+    "sirv-cli": "1.0.0"
+  }
+}

client/public/global.css

@@ -0,0 +1,81 @@
+html,
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  color: #333;
+  margin: 0;
+  padding: 20px;
+  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;
+  padding: 0.4em;
+  margin: 0 0 0.5em 0;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+
+input:disabled {
+  color: #ccc;
+}
+
+input[type="range"] {
+  height: 0;
+}
+
+button {
+  color: #333;
+  background-color: #f4f4f4;
+  outline: none;
+}
+
+button:disabled {
+  color: #999;
+}
+
+button:not(:disabled):active {
+  background-color: #ddd;
+}
+
+button:focus {
+  border-color: #666;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}

client/public/index.html

@@ -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="/global.css" />
+    <link rel="stylesheet" href="/build/bundle.css" />
+
+    <script defer src="/build/bundle.js"></script>
+  </head>
+
+  <body></body>
+</html>

client/rollup.config.js

@@ -0,0 +1,74 @@
+import svelte from "rollup-plugin-svelte";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import livereload from "rollup-plugin-livereload";
+import postcss from "rollup-plugin-postcss";
+import { terser } from "rollup-plugin-terser";
+import { spawn } from "child_process";
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let started = false;
+
+  return {
+    writeBundle() {
+      if (!started) {
+        started = true;
+
+        spawn("npm", ["run", "start", "--", "--dev"], {
+          stdio: ["ignore", "inherit", "inherit"],
+          shell: true,
+        });
+      }
+    },
+  };
+}
+
+export default {
+  input: "src/main.js",
+  output: {
+    sourcemap: true,
+    format: "iife",
+    name: "app",
+    file: "public/build/bundle.js",
+  },
+  plugins: [
+    postcss(),
+    svelte({
+      // enable run-time checks when not in production
+      dev: !production,
+      // we'll extract any component CSS out into
+      // a separate file - better for performance
+      css: (css) => {
+        css.write("public/build/bundle.css");
+      },
+    }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ["svelte"],
+    }),
+    commonjs(),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("public"),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};

client/src/App.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Routes from "./routes/Routes.svelte";
+</script>
+
+<nav>
+  <a href="/">Home</a>
+  <a href="/explore">Explore</a>
+</nav>
+
+<Routes />

client/src/components/SomeComponent.svelte

@@ -0,0 +1,6 @@
+<script>
+  export let value = 100;
+  export let string = "string";
+</script>
+
+<button on:click>{value} - {string}</button>

client/src/main.js

@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

client/src/routes/Explore.svelte

@@ -0,0 +1 @@
+<h2>Explore</h2>

client/src/routes/Index.svelte

@@ -0,0 +1 @@
+<h2>Home</h2>

client/src/routes/Routes.svelte

@@ -0,0 +1,23 @@
+<script>
+  import page from "page";
+
+  // Pages
+  import Index from "./Index.svelte";
+  import Explore from "./Explore.svelte";
+
+  let component;
+  let params;
+
+  function setComponent(c) {
+    return function setComponentInner({ params: p }) {
+      component = c;
+      params = p;
+    };
+  }
+
+  page("/", setComponent(Index));
+  page("/explore", setComponent(Explore));
+  page({ hashbang: true });
+</script>
+
+<svelte:component this={component} bind:params />

client/stories/general.stories.js

@@ -0,0 +1,15 @@
+import { withKnobs, select, number } from "@storybook/addon-knobs";
+import SomeComponent from "../src/components/SomeComponent.svelte";
+
+export default {
+  title: "Component Template",
+  decorators: [withKnobs],
+};
+
+export const Basic = () => ({
+  Component: SomeComponent,
+  props: {
+    value: number("value", 100),
+    string: select("string", ["opt 1", "opt 2", "opt 3", "opt 4"]),
+  },
+});

client/tests/example.test.js

@@ -0,0 +1,5 @@
+describe("example", () => {
+  it("1 + 1 = 2", () => {
+    expect(1 + 1).toEqual(2);
+  });
+});