Merge pull request #26 from sebastinez/sebastinez/add-vite

Replace Snowpack with Vite

.eslintrc.json

@@ -1,28 +1,28 @@
-module.exports = {
-  env: {
-    browser: true,
-    node: true,
+{
+  "env": {
+    "browser": true,
+    "node": true
   },
-  extends: [
+  "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended"
   ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: "module",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
   },
-  plugins: [
+  "plugins": [
     "svelte3",
     "@typescript-eslint"
   ],
-  overrides: [
+  "overrides": [
     {
-      files: ["*.svelte"],
-      processor: "svelte3/svelte3",
+      "files": ["*.svelte"],
+      "processor": "svelte3/svelte3"
     }
   ],
-  rules: {
+  "rules": {
     "indent": ["error", 2, { "SwitchCase": 1 }],
     "semi": "off", // We use the typescript-specific rule as it's more accurate.
     "curly": ["error", "multi-line", "consistent"],
@@ -31,7 +31,7 @@ module.exports = {
     "space-before-function-paren": ["error", {
       "anonymous": "always",
       "named": "never",
-      "asyncArrow": "always",
+      "asyncArrow": "always"
     }],
     "eol-last": ["error"],
     "@typescript-eslint/no-explicit-any": "off",
@@ -40,16 +40,16 @@ module.exports = {
       "warn", {
         "multiline": {
           "delimiter": "semi",
-          "requireLast": true,
+          "requireLast": true
         },
         "singleline": {
           "delimiter": "semi",
-          "requireLast": false,
+          "requireLast": false
         }
       }
     ]
   },
-  settings: {
-    "svelte3/typescript": true,
-  },
-};
+  "settings": {
+    "svelte3/typescript": true
+  }
+}

.github/workflows/check-build.yml

@@ -0,0 +1,13 @@
+name: check-build
+on: [push, pull_request]
+
+jobs:
+  check-format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14'
+      - run: npm ci
+      - run: npm run build 

.github/workflows/check-format.yml

@@ -7,6 +7,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
+        with:
+          node-version: '14'
       - run: npm ci
       - run: ./scripts/check-format
         shell: bash

.github/workflows/svelte-check.yml

@@ -0,0 +1,13 @@
+name: svelte-check 
+on: [push, pull_request]
+
+jobs:
+  check-format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14'
+      - run: npm ci
+      - run: npm run check 

index.html

@@ -14,6 +14,6 @@
     <title>Radicle Interface</title>
   </head>
   <body>
-    <script type="module" src="/dist/index.js"></script>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>

package.json

@@ -1,24 +1,25 @@
 {
   "scripts": {
-    "start": "snowpack dev",
+    "start": "vite",
+    "serve": "vite preview",
     "build": "scripts/build",
     "check": "svelte-check",
     "test": "echo \"This template does not include a test runner by default.\" && exit 1"
   },
+  "type": "module",
   "devDependencies": {
-    "@snowpack/plugin-svelte": "^3.5.2",
+    "@sveltejs/vite-plugin-svelte": "1.0.0-next.10",
     "@tsconfig/svelte": "^1.0.10",
+    "@types/node": "^15.12.2",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "@typescript-eslint/parser": "^4.26.1",
     "eslint": "^7.28.0",
     "eslint-plugin-svelte3": "^3.2.0",
-    "snowpack": "^3.5.0",
     "svelte-check": "^1.5.2",
-    "svelte-preprocess": "^4.7.2",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "vite": "^2.3.7"
   },
   "dependencies": {
-    "@snowpack/plugin-typescript": "^1.2.1",
     "@types/marked": "^2.0.3",
     "ethereum-blockies": "^0.1.1",
     "ethers": "^5.0.31",
@@ -26,6 +27,7 @@
     "multibase": "^4.0.4",
     "multihashes": "^4.0.2",
     "svelte": "^3.32.3",
-    "svelte-routing": "^1.6.0"
+    "svelte-routing": "^1.6.0",
+    "svelte-preprocess": "^4.7.2"
   }
 }

scripts/build

@@ -1,4 +1,4 @@
 #!/bin/sh
 
-snowpack build
+vite build
 cp _redirects build/_redirects

snowpack.config.js

@@ -1,38 +0,0 @@
-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  env: {
-    RADICLE_ALCHEMY_API_KEY: process.env.RADICLE_ALCHEMY_API_KEY,
-    RADICLE_HTTP_API: process.env.RADICLE_HTTP_API,
-  },
-  mount: {
-    public: '/',
-    src: '/dist',
-  },
-  alias: {
-    '@app': './src',
-  },
-  plugins: [
-    '@snowpack/plugin-svelte',
-    '@snowpack/plugin-typescript',
-  ],
-  routes: [
-    /* Enable an SPA Fallback in development: */
-    {"match": "routes", "src": ".*", "dest": "/index.html"},
-    {"match": "all", "src": "/projects/.*", "dest": "/index.html"},
-    {"match": "all", "src": "/orgs/.*/projects/.*", "dest": "/index.html"},
-  ],
-  optimize: {
-    /* Setting `bundle: true` breaks .json imports in snowpack 3.5.0 */
-    "bundle": false,
-  },
-  packageOptions: {
-    polyfillNode: true,
-  },
-  devOptions: {
-    open: "none",
-    output: "dashboard"
-  },
-  buildOptions: {
-    sourcemap: true,
-  },
-};

src/Address.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { link } from 'svelte-routing';
   import { ethers } from 'ethers';

src/App.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Router, Route } from "svelte-routing";
   import { getConfig } from '@app/config';
   import { Connection, state, session } from '@app/session';

src/Avatar.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { createIcon } from '@app/blockies';
   import { isAddress } from '@app/utils';

src/Blockies.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { createIcon } from '@app/blockies';
 

src/Connect.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Connection } from "@app/session";
   import { state } from '@app/session';
   import type { Config } from '@app/config';

src/Error.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import Modal from '@app/Modal.svelte';
   import type { Err } from '@app/error';

src/Form.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="typescript">
+<script context="module" lang="ts">
   export interface Field {
     name: string;
     value: string | null;
@@ -8,7 +8,7 @@
   }
 </script>
 
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { capitalize, isUrl, isAddress } from '@app/utils';
   import Address from '@app/Address.svelte';

src/Header.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   // TODO: Shorten tx hash
   import { link } from "svelte-routing";
   import { formatBalance, formatAddress } from "@app/utils";

src/Icon.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   export let name: string;
   export let width: number | null = null;
   export let height: number | null = null;

src/Link.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Link } from "svelte-routing";
 
   export let to: string;

src/Loading.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   export let small = false;
   export let color = "secondary";
   export let center = false;

src/Logo.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   export let style = "";
 </script>
 

src/Markdown.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from "svelte";
   import marked from "marked";
 

src/Modal.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   export let floating = false;
   export let error = false;
   export let subtle = false;

src/Options.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
   export let options: { label: string; value: string }[];

src/base/home/Index.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { navigate } from 'svelte-routing';
 
   let input = "";

src/base/orgs/Create.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { navigate } from 'svelte-routing';
   import Modal from '@app/Modal.svelte';

src/base/orgs/Index.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import type { SvelteComponent } from 'svelte';
   import { Link } from 'svelte-routing';
   import { session } from '@app/session';

src/base/orgs/Routes.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Route } from "svelte-routing";
   import Index from '@app/base/orgs/Index.svelte';
   import View from '@app/base/orgs/View.svelte';

src/base/orgs/TransferOwnership.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount, createEventDispatcher } from 'svelte';
   import Modal from '@app/Modal.svelte';
   import type { Config } from '@app/config';

src/base/orgs/View.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import * as ethers from 'ethers';
   import { onMount } from 'svelte';
   import { Link } from 'svelte-routing';

src/base/projects/Blob.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import type { Blob } from "@app/project";
 
   export let blob: Blob;

src/base/projects/Browser.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { navigate } from 'svelte-routing';
   import type { Config } from '@app/config';
   import * as proj from '@app/project';

src/base/projects/Readme.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import Markdown from '@app/Markdown.svelte';
   export let content: string;
 </script>

src/base/projects/Routes.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Route } from "svelte-routing";
   import View from '@app/base/projects/View.svelte';
   import type { Config } from '@app/config';

src/base/projects/Tree.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
 
   import type { Tree } from "@app/project";

src/base/projects/Tree/File.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import Loading from '@app/Loading.svelte';
 
   export let active: boolean;

src/base/projects/Tree/Folder.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
 
   import Loading from '@app/Loading.svelte';

src/base/projects/View.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Link } from 'svelte-routing';
   import type { Config } from '@app/config';
   import * as proj from '@app/project';

src/base/projects/Widget.svelte

@@ -1,4 +1,4 @@
-<script type="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
   import type { Config } from '@app/config';

src/base/registrations/Index.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { navigate } from "svelte-routing";
   import type { Config } from '@app/config';
 

src/base/registrations/New.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
   import { formatAddress } from '@app/utils';

src/base/registrations/Routes.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Route, navigate } from "svelte-routing";
   import Index from '@app/base/registrations/Index.svelte';
   import New from '@app/base/registrations/New.svelte';

src/base/registrations/Submit.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   // TODO: When name is registered, prompt user to edit records.
   // TODO: When transfering name, warn about transfering to org.
   import { onMount } from 'svelte';

src/base/registrations/Update.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount, createEventDispatcher } from 'svelte';
   import { setRecords } from './resolver';
   import type { EnsRecord } from './resolver';

src/base/registrations/View.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
   import type { Config } from '@app/config';

src/base/resolver/Query.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { ethers } from 'ethers';
   import { navigate } from 'svelte-routing';

src/base/resolver/Routes.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Route } from "svelte-routing";
   import Resolve from '@app/base/resolver/Query.svelte';
   import type { Config } from '@app/config';

src/base/users/Routes.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { Route } from "svelte-routing";
   import View from '@app/base/users/View.svelte';
   import type { Config } from '@app/config';

src/base/users/View.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import type { Config } from '@app/config';
   import type { Registration } from '@app/base/registrations/registrar';

src/base/vesting/Index.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { formatAddress } from '@app/utils';
   import { State, state } from './state';

src/config.json

@@ -62,6 +62,7 @@
     },
     "tokens": []
   },
+  "radicle": { "api": "" },
   "abi": {
     "registrar": [
       "function rad() view returns (address)",

src/config.ts

@@ -8,12 +8,6 @@ declare global {
     registrarState: any;
   }
 
-  interface ImportMeta {
-    env: {
-      RADICLE_ALCHEMY_API_KEY: string | null;
-      RADICLE_HTTP_API: string | null;
-    };
-  }
 }
 
 export class Config {
@@ -27,7 +21,7 @@ export class Config {
   signer: ethers.Signer & TypedDataSigner | null;
   safe: { api: string | null; viewer: string | null };
   abi: { [contract: string]: string[] };
-  seed: { api: string | null };
+  seed: { api?: string };
   tokens: string[];
   token: ethers.Contract;
 
@@ -37,7 +31,7 @@ export class Config {
     signer: ethers.Signer & TypedDataSigner | null,
   ) {
     const cfg = (<Record<string, any>> config)[network.name];
-    const api = import.meta.env.RADICLE_HTTP_API;
+    const api = config.radicle.api;
 
     if (!cfg) {
       throw `Network ${network.name} is not supported`;

src/ens/DomainInput.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
 
   export let root: string;

src/ens/SetName.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import Modal from '@app/Modal.svelte';
   import type { Config } from '@app/config';

svelte.config.js

@@ -1,9 +1,5 @@
-const autoPreprocess = require('svelte-preprocess');
+import sveltePreprocess from "svelte-preprocess";
 
-module.exports = {
-  preprocess: autoPreprocess({
-    defaults: {
-      script: 'typescript',
-    },
-  }),
+export default {
+  preprocess: sveltePreprocess(),
 };

tsconfig.json

@@ -10,7 +10,8 @@
     "target": "es2020",
     "module": "es2020",
     "types": [
-      "svelte"
+      "svelte",
+      "vite/client"
     ],
     "sourceMap": true,
     "moduleResolution": "node",

vite.config.ts

@@ -0,0 +1,21 @@
+import path from "path";
+import { UserConfig } from "vite";
+import svelte from "@sveltejs/vite-plugin-svelte";
+
+const config: UserConfig = {
+  optimizeDeps:{
+    exclude:['svelte-routing']
+  },
+  plugins: [svelte()],
+  resolve: {
+    alias: {
+      "@app": path.resolve("./src"),
+    },
+  },
+  build: {
+    outDir: "build",
+    sourcemap: true
+  }
+};
+
+export default config;