update svelte-package to v2

downgrade svelte-kit to 1.3.10 to fix vitest error (see sveltejs/kit/issues/9162)
update logo to match new package name Elementari
add copyright to footer

.github/workflows/test.yml

@@ -49,6 +49,6 @@ jobs:
         run: |
           npm install
           npm run package
-          npm publish ./package
+          npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -4,7 +4,7 @@ node_modules
 # production build
 .svelte-kit
 build
-package
+dist
 
 # screen recordings
 *.mp4

package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "version": "0.1.0",
   "type": "module",
-  "svelte": "index.js",
+  "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/elementari/issues",
   "scripts": {
     "dev": "vite dev",
@@ -24,27 +24,28 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.1.0",
+    "@sveltejs/kit": "1.3.10",
     "d3-array": "^3.2.2",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
+    "svelte": "^3.55.1",
     "svelte-multiselect": "^8.3.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.30.0",
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.3.5",
-    "@sveltejs/package": "^1.0.2",
+    "@playwright/test": "^1.31.1",
+    "@sveltejs/adapter-static": "1.0.6",
+    "@sveltejs/package": "^2.0.2",
     "@types/d3-array": "^3.0.4",
     "@types/d3-color": "^3.1.0",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
-    "@vitest/coverage-c8": "^0.28.5",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitest/coverage-c8": "^0.29.1",
     "eslint": "^8.34.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
@@ -57,15 +58,14 @@
     "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.3",
+    "svelte-check": "^3.0.4",
     "svelte-preprocess": "^5.0.1",
     "svelte-toc": "^0.5.2",
-    "svelte-zoo": "^0.2.5",
-    "svelte2tsx": "^0.6.1",
+    "svelte-zoo": "^0.3.4",
+    "svelte2tsx": "^0.6.2",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.28.5"
+    "vite": "^4.1.4",
+    "vitest": "^0.29.1"
   },
   "keywords": [
     "svelte",
@@ -77,5 +77,24 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "exports": {
+    "./element-data": {
+      "types": "./dist/element-data.d.ts",
+      "default": "./dist/element-data.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./labels": {
+      "types": "./dist/labels.d.ts",
+      "default": "./dist/labels.js"
+    },
+    "./stores": {
+      "types": "./dist/stores.d.ts",
+      "default": "./dist/stores.js"
+    }
   }
 }

src/lib/index.ts

@@ -1,4 +1,5 @@
 export { default as BohrAtom } from './BohrAtom.svelte'
+export { default as ColorBar } from './ColorBar.svelte'
 export { default as ColorCustomizer } from './ColorCustomizer.svelte'
 export { default as ColorScaleSelect } from './ColorScaleSelect.svelte'
 export { default as element_data } from './element-data'
@@ -29,12 +30,12 @@ export const categories = [
   `transition metal`,
 ] as const
 
-export type Category = typeof categories[number]
+export type Category = (typeof categories)[number]
 
 // prettier-ignore
 export const elem_symbols = [`H`,`He`,`Li`,`Be`,`B`,`C`,`N`,`O`,`F`,`Ne`,`Na`,`Mg`,`Al`,`Si`,`P`,`S`,`Cl`,`Ar`,`K`,`Ca`,`Sc`,`Ti`,`V`,`Cr`,`Mn`,`Fe`,`Co`,`Ni`,`Cu`,`Zn`,`Ga`,`Ge`,`As`,`Se`,`Br`,`Kr`,`Rb`,`Sr`,`Y`,`Zr`,`Nb`,`Mo`,`Tc`,`Ru`,`Rh`,`Pd`,`Ag`,`Cd`,`In`,`Sn`,`Sb`,`Te`,`I`,`Xe`,`Cs`,`Ba`,`La`,`Ce`,`Pr`,`Nd`,`Pm`,`Sm`,`Eu`,`Gd`,`Tb`,`Dy`,`Ho`,`Er`,`Tm`,`Yb`,`Lu`,`Hf`,`Ta`,`W`,`Re`,`Os`,`Ir`,`Pt`,`Au`,`Hg`,`Tl`,`Pb`,`Bi`,`Po`,`At`,`Rn`,`Fr`,`Ra`,`Ac`,`Th`,`Pa`,`U`,`Np`,`Pu`,`Am`,`Cm`,`Bk`,`Cf`,`Es`,`Fm`,`Md`,`No`,`Lr`,`Rf`,`Db`,`Sg`,`Bh`,`Hs`,`Mt`,`Ds`,`Rg`,`Cn`,`Nh`,`Fl`,`Mc`,`Lv`,`Ts`,`Og`] as const
 
-export type ElementSymbol = typeof elem_symbols[number]
+export type ElementSymbol = (typeof elem_symbols)[number]
 
 export type ChemicalElement = {
   'cpk-hex': string | null

src/site/Footer.svelte

@@ -29,6 +29,13 @@
       Use arrow keys  ← →  to navigate between elements.
     </small>
   </p>
+  <p>
+    <small>
+      Built with Svelte by
+      <a href="https://github.com/janosh">Janosh</a>
+      &copy; 2022
+    </small>
+  </p>
 </footer>
 
 <style>

svelte.config.js

@@ -36,7 +36,7 @@ export default {
     prerender: {
       handleHttpError: ({ path, message }) => {
         // ignore missing element photos
-        if (path.startsWith(`/elements`)) return
+        if (path.startsWith(`/elements/`)) return
 
         // fail the build for other errors
         throw new Error(message)

tests/unit/index.test.ts

@@ -21,6 +21,6 @@ test(`src/lib/icons/index.ts re-exports all icons`, () => {
 })
 
 test(`categories and element_symbols are exported`, () => {
-  expect(lib.categories).toHaveLength(8)
+  expect(lib.categories).toHaveLength(10)
   expect(lib.elem_symbols).toHaveLength(lib.element_data.length)
 })