Refactor to use SvelteKit package command

This allows importing the library without having to use TypeScript preprocessors which is the recommended way sveltejs/component-template#29
TeemuKoivisto · Sep 22, 2021 · dde1f93 · dde1f93
1 parent 02d14e0
commit dde1f93
Show file tree

Hide file tree

Showing 27 changed files with 171 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ coverage
 # production
 build
 dist
+package
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -10,8 +10,6 @@ Size: 15 kBs (no external dependencies)
 
 ## How to use
 
-NOTE: Since I'm a TypeScript fanboy I wrote this library in TS and therefore the `"svelte"` block in the `package.json` points to a `index.ts` file. To import this library in a Svelte project you need to add a TypeScript bundler incase you didn't already have one. While experimenting with the imports and local linking I noticed `rollup-plugin-ts` parser worked better than for example `rollup-plugin-typescript2`. Don't know the details but it was weird https://github.com/sveltejs/component-template/issues/29.
-
 You can import the library as:
 
 ```ts

diff --git a/core/build.mjs b/core/build.mjs
@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+import { promisify } from 'util'
+import { exec as rawExec } from 'child_process'
+import { promises as fs } from 'fs'
+import path from 'path'
+
+const exec = promisify(rawExec)
+
+async function readJson(path) {
+  const pkg = await fs.readFile(path, 'utf-8').catch(err => console.error(err))
+  if (!pkg) return undefined
+  return JSON.parse(pkg)
+}
+
+async function cleanCurrentExports() {
+  const pkg = await readJson('./package.json')
+  pkg.exports = {}
+  await fs.writeFile('./package.json', JSON.stringify(pkg, null, 2))
+}
+
+async function writePackageExports() {
+  const oldPkg = await readJson('./package.json')
+  const newPkg = await readJson('./package/package.json')
+  oldPkg.exports = Object.keys(newPkg.exports).reduce((acc, key) => {
+    const newPath = path.join('./package', newPkg.exports[key])
+    acc[key] = `./${newPath}`
+    return acc
+  }, {})
+  await fs.writeFile('./package.json', JSON.stringify(oldPkg, null, 2))
+}
+
+async function build() {
+  await cleanCurrentExports()
+  await exec('yarn build:pkg')
+  await exec('yarn build:dist')
+  await exec('rm ./package/.npmignore')
+  await writePackageExports()
+  await exec('rm ./package/package.json')
+}
+
+build()
diff --git a/core/cypress/integration/examples.spec.js → core/cypress/integration/examples.spec.mjs b/core/cypress/integration/examples.spec.js → core/cypress/integration/examples.spec.mjs
diff --git a/core/cypress/integration/log-copy.spec.js → core/cypress/integration/log-copy.spec.mjs b/core/cypress/integration/log-copy.spec.js → core/cypress/integration/log-copy.spec.mjs
diff --git a/core/cypress/plugins/index.js → core/cypress/plugins/index.cjs b/core/cypress/plugins/index.js → core/cypress/plugins/index.cjs
diff --git a/core/cypress/support/commands.js → core/cypress/support/commands.mjs b/core/cypress/support/commands.js → core/cypress/support/commands.mjs
diff --git a/core/cypress/support/index.js → core/cypress/support/index.mjs b/core/cypress/support/index.js → core/cypress/support/index.mjs
diff --git a/core/package.json b/core/package.json
@@ -6,10 +6,23 @@
   "homepage": "https://github.com/TeemuKoivisto/svelte-tree-view",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
-  "svelte": "src/index.ts",
+  "svelte": "package/index.js",
   "types": "dist/types.d.ts",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package/package.json",
+    "./TreeNode.svelte": "./package/TreeNode.svelte",
+    "./TreeView.svelte": "./package/TreeView.svelte",
+    ".": "./package/index.js",
+    "./stores": "./package/stores/index.js",
+    "./stores/props": "./package/stores/props.js",
+    "./stores/root-element": "./package/stores/root-element.js",
+    "./stores/tree": "./package/stores/tree.js",
+    "./stores/treemap": "./package/stores/treemap.js",
+    "./tree-utils": "./package/tree-utils.js"
+  },
   "files": [
-    "src",
+    "package",
     "dist",
     ".npmignore",
     "LICENSE",
@@ -26,13 +39,16 @@
     "svelte",
     "tree-view",
     "json-tree",
+    "typescript",
     "tree",
     "json",
     "base16",
     "theme"
   ],
   "scripts": {
-    "build": "rimraf ./dist && rollup -c && cp ./src/types.ts ./dist/types.d.ts",
+    "build": "./build.mjs",
+    "build:dist": "rimraf ./dist && rollup -c && cp ./src/lib/types.ts ./dist/types.d.ts",
+    "build:pkg": "svelte-kit package",
     "watch": "rollup -cw",
     "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|svelte|md|graphql|mdx)\"",
     "lint": "eslint --cache --ext .js,.ts,.svelte ./src",
@@ -50,6 +66,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
+    "@sveltejs/kit": "^1.0.0-next.168",
     "@testing-library/cypress": "^8.0.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/svelte": "^3.0.3",
@@ -80,6 +97,7 @@
     "svelte-check": "^2.2.5",
     "svelte-jester": "^1.8.2",
     "svelte-preprocess": "^4.8.0",
+    "svelte2tsx": "^0.4.6",
     "ts-jest": "^27.0.1",
     "tslib": "^2.3.1",
     "typescript": "^4.4.2"
@@ -114,4 +132,4 @@
     ]
   },
   "dependencies": {}
-}
+}
diff --git a/core/rollup.config.js b/core/rollup.config.js
@@ -7,12 +7,12 @@ import scss from 'rollup-plugin-scss'
 import { terser } from 'rollup-plugin-terser'
 
 import pkg from './package.json'
-const preprocessOptions = require('./svelte.config').preprocessOptions
+import svelteConfig from './svelte.config'
 
 const isProduction = !process.env.ROLLUP_WATCH
 
 export default {
-  input: 'src/index.ts',
+  input: 'src/lib/index.ts',
   output: [
     {
       file: pkg.main,
@@ -39,7 +39,7 @@ export default {
         // enable run-time checks when not in production
         dev: !isProduction
       },
-      preprocess: autoPreprocess(preprocessOptions)
+      preprocess: autoPreprocess(svelteConfig.preprocessOptions)
     }),
     scss(),
     resolve({

diff --git a/core/src/app.html b/core/src/app.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="svelte-tree-view is a Svelte library to render Javascript objects in a tree layout"
+    />
+    <title>svelte-tree-view</title>
+
+    <script>
+      try {
+        if (!('theme' in localStorage)) {
+          localStorage.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+        }
+
+        document.querySelector('html').classList.add(localStorage.theme)
+      } catch (e) {
+        console.error(e)
+      }
+    </script>
+
+    %svelte.head%
+  </head>
+
+  <body>
+    <div id="svelte">%svelte.body%</div>
+  </body>
+</html>
diff --git a/core/src/TreeNode.svelte → core/src/lib/TreeNode.svelte b/core/src/TreeNode.svelte → core/src/lib/TreeNode.svelte
diff --git a/core/src/TreeView.svelte → core/src/lib/TreeView.svelte b/core/src/TreeView.svelte → core/src/lib/TreeView.svelte
@@ -21,7 +21,7 @@
     TreeRecursionOpts
   } from './types'
 
-  export let data: Object,
+  export let data: { [key in string | number | symbol]: unknown } | any[] | Map<any, any> | Set<any>,
     theme: IBase16Theme | undefined = undefined,
     showLogButton = false,
     showCopyButton = false,
@@ -108,7 +108,7 @@
   })
 </script>
 
-<ul class={`${$$props.class}`} bind:this={rootElement}>
+<ul class={$$props.class || ''} bind:this={rootElement}>
   {#each $treeStore.children as child}
     <TreeNode id={child.id} />
   {/each}

diff --git a/core/src/__tests__/TreeView.spec.ts → core/src/lib/__tests__/TreeView.spec.ts b/core/src/__tests__/TreeView.spec.ts → core/src/lib/__tests__/TreeView.spec.ts
diff --git a/.../src/__tests__/__fixtures__/example1.json → .../lib/__tests__/__fixtures__/example1.json b/.../src/__tests__/__fixtures__/example1.json → .../lib/__tests__/__fixtures__/example1.json
diff --git a/...sts__/__snapshots__/TreeView.spec.ts.snap → ...sts__/__snapshots__/TreeView.spec.ts.snap b/...sts__/__snapshots__/TreeView.spec.ts.snap → ...sts__/__snapshots__/TreeView.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`TreeView should render 1`] = `
 <body>
   <div>
     <ul
-      class="undefined svelte-q3pq1s"
+      class=" svelte-q3pq1s"
     >
       <li
         class="row svelte-1bpmhhm"
@@ -6807,7 +6807,7 @@ exports[`TreeView should render with almost all props defined 1`] = `
 <body>
   <div>
     <ul
-      class="undefined svelte-q3pq1s"
+      class=" svelte-q3pq1s"
     >
       <li
         class="row svelte-1bpmhhm"

diff --git a/core/src/__tests__/generateObj.ts → core/src/lib/__tests__/generateObj.ts b/core/src/__tests__/generateObj.ts → core/src/lib/__tests__/generateObj.ts
diff --git a/core/src/index.ts → core/src/lib/index.ts b/core/src/index.ts → core/src/lib/index.ts
diff --git a/core/src/stores/index.ts → core/src/lib/stores/index.ts b/core/src/stores/index.ts → core/src/lib/stores/index.ts
diff --git a/core/src/stores/props.ts → core/src/lib/stores/props.ts b/core/src/stores/props.ts → core/src/lib/stores/props.ts
diff --git a/core/src/stores/root-element.ts → core/src/lib/stores/root-element.ts b/core/src/stores/root-element.ts → core/src/lib/stores/root-element.ts
diff --git a/core/src/stores/tree.ts → core/src/lib/stores/tree.ts b/core/src/stores/tree.ts → core/src/lib/stores/tree.ts
diff --git a/core/src/stores/treemap.ts → core/src/lib/stores/treemap.ts b/core/src/stores/treemap.ts → core/src/lib/stores/treemap.ts
diff --git a/core/src/tree-utils.ts → core/src/lib/tree-utils.ts b/core/src/tree-utils.ts → core/src/lib/tree-utils.ts
diff --git a/core/src/types.ts → core/src/lib/types.ts b/core/src/types.ts → core/src/lib/types.ts
diff --git a/core/svelte.config.js b/core/svelte.config.js
@@ -1,10 +1,22 @@
-const autoPreprocess = require('svelte-preprocess')
+import autoPreprocess from 'svelte-preprocess'
 
 const preprocessOptions = {
   scss: {}
 }
 
-module.exports = {
+export default {
   preprocess: autoPreprocess(preprocessOptions),
-  preprocessOptions
+  preprocessOptions,
+  kit: {
+    package: {
+      exports: {
+        include: ['**'],
+        exclude: ['package.json', 'types.ts']
+      },
+      files: {
+        include: ['**'],
+        exclude: ['__tests__/**/*']
+      }
+    }
+  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1462,6 +1462,16 @@
     sade "^1.7.4"
     vite "^2.5.7"
 
+"@sveltejs/kit@^1.0.0-next.168":
+  version "1.0.0-next.171"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.171.tgz#7c0843cb65d6697d48a87633611e1d407858cf91"
+  integrity sha512-lDdEc6eVc8ILuQavHw/HKK7rQs3LMPp1gxieoChvSJGix/GGEaxaOQlUH0JyoLridqzQo39z6XM0giwWLQtGfA==
+  dependencies:
+    "@sveltejs/vite-plugin-svelte" "^1.0.0-next.24"
+    cheap-watch "^1.0.4"
+    sade "^1.7.4"
+    vite "^2.5.7"
+
 "@sveltejs/vite-plugin-svelte@^1.0.0-next.24":
   version "1.0.0-next.24"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.24.tgz#55033c27b5f428e804ff64f410a640baacff0333"
@@ -2484,6 +2494,11 @@ cheap-watch@^1.0.3:
   resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.3.tgz#3c4265718bcf8f1ae08f5e450f9f4693432e028e"
   integrity sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg==
 
+cheap-watch@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.4.tgz#0bcb4a3a8fbd9d5327936493f6b56baa668d8fef"
+  integrity sha512-QR/9FrtRL5fjfUJBhAKCdi0lSRQ3rVRRum3GF9wDKp2TJbEIMGhUEr2yU8lORzm9Isdjx7/k9S0DFDx+z5VGtw==
+
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -2911,6 +2926,11 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
+dedent-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305"
+  integrity sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU=
+
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@@ -4984,6 +5004,13 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -5171,6 +5198,14 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-emoji@^1.11.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
@@ -5473,6 +5508,14 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+pascal-case@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -6548,6 +6591,14 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.8.0:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
+svelte2tsx@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.4.6.tgz#3435064962c910c0a075b4a1c04e91eaf568f5e5"
+  integrity sha512-flljgh/MbJDijo6Z1HhCfyzdRgn1Nd7QTuuxk9Oq5CzyBXZl/NJYh4otZZwUHnx5poy8k7Oxr2CBE3IBh89tmQ==
+  dependencies:
+    dedent-js "^1.0.1"
+    pascal-case "^3.1.1"
+
 svelte@^3.42.4:
   version "3.42.4"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.4.tgz#838ed98fa7b26fc5fffe4df0d7ba345f1c54cf4f"
@@ -6773,7 +6824,7 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.3.1:
+tslib@^2.0.3, tslib@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ coverage @@
     # production
     build
     dist
+    package
     # misc
     .DS_Store
@@ Expand Down @@