Iterate release workflow

.github/workflows/release.yml

@@ -3,47 +3,43 @@
 name: Release to NPM
 
 on:
-    push:
-        branches:
-            - main
+  push:
+    branches:
+      - main
 
 permissions:
-    contents: read # for checkout
+  contents: read # for checkout
 
 jobs:
-    release:
-        name: Release
-        runs-on: ubuntu-latest
-
-        defaults:
-            run:
-                working-directory: ./components
-
-        permissions:
-            contents: write # to publish a GitHub release
-            issues: write # to comment on released issues
-            pull-requests: write # to comment on released pull requests
-            id-token: write # to enable use of OIDC for npm provenance
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-
-            - name: Setup Node.js
-              uses: actions/setup-node@v4
-              with:
-                  node-version: "lts/*"
-
-            - name: Install dependencies
-              run: npm clean-install
-
-            - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
-              run: npm audit signatures
-
-            - name: Release
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-              run: npx semantic-release
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ./components
+
+    permissions:
+      contents: write # to publish a GitHub release
+      issues: write # to comment on released issues
+      pull-requests: write # to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - run: npm ci
+
+      - run: npm audit signatures
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/test-storybook.yml

@@ -1,4 +1,4 @@
-name: "Run Storybook Tests"
+name: 'Run Storybook Tests'
 on:
   workflow_dispatch:
   push:
@@ -20,4 +20,5 @@ jobs:
           node-version: 20
       - run: npm ci
       - run: npx playwright install --with-deps
+      - run: npm run sync
       - run: npm run test-storybook:ci

components/.gitignore

@@ -3,6 +3,7 @@
 .vercel
 /.svelte-kit
 /build
+/dist
 
 # OS
 .DS_Store

components/package.json

@@ -1,23 +1,35 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
+	"version": "1.0.6",
 	"author": "SWR Data Lab",
+	"license": "UNLICENSED",
+	"type": "module",
 	"publishConfig": {
 		"access": "restricted"
 	},
+	"repository": {
+		"url": "https://github.com/SWRdata/components"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package -i src && publint",
+		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"storybook": "storybook dev -p 6006",
 		"start": "storybook dev -p 6006",
+		"sync": "svelte-kit sync",
 		"build-storybook": "storybook build --disable-telemetry",
 		"test-storybook": "vitest run --project=storybook",
 		"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
 		"semantic-release": "semantic-release"
 	},
+	"peerDependencies": {
+		"svelte": ">=5.0.0"
+	},
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "^1.8.0",
 		"maplibre-gl": "^5.5.0",
@@ -36,6 +48,7 @@
 		"@storybook/test-runner": "^0.23.0-next.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.3.11",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@versatiles/style": "^5.6.0",
 		"@vitest/browser": "^3.1.1",
@@ -44,31 +57,41 @@
 		"http-server": "^14.1.1",
 		"mdx-mermaid": "^2.0.3",
 		"playwright": "^1.51.1",
-		"sass-embedded": "^1.78.0",
+		"publint": "^0.3.12",
+		"sass": "^1.89.0",
+		"sass-embedded": "^1.89.0",
 		"semantic-release": "^24.1.2",
 		"storybook": "^9.0.0-beta.11",
 		"svelte": "^5.23.0",
 		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.8.3",
 		"vite": "^6.0.0",
 		"vitest": "^3.1.1",
 		"wait-on": "^8.0.1"
 	},
-	"type": "module",
+	"overrides": {
+		"storybook": "$storybook"
+	},
 	"release": {
 		"plugins": [
 			"@semantic-release/commit-analyzer",
 			"@semantic-release/release-notes-generator",
 			"@semantic-release/npm"
 		]
 	},
+	"files": [
+		"./dist",
+		"!./dist/**/*.test.*",
+		"!./dist/**/*.stories.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
 		}
-	},
-	"version": "1.0.6",
-	"overrides": {
-		"storybook": "$storybook"
 	}
 }

components/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import type {
 		AddLayerObject,
+		CircleLayoutProps,
+		CirclePaintProps,
 		FillLayoutProps,
 		FillPaintProps,
 		LineLayoutProps,
 		LinePaintProps,
 		MapGeoJSONFeature,
-		MapLayerMouseEvent
+		MapLayerMouseEvent,
+		SymbolLayoutProps,
+		SymbolPaintProps
 	} from 'maplibre-gl';
 
 	import { getMapContext } from '../context.svelte.js';
@@ -22,8 +26,8 @@
 		visible?: boolean;
 		minZoom?: number;
 		maxZoom?: number;
-		paint?: LinePaintProps | FillPaintProps;
-		layout?: LineLayoutProps | FillLayoutProps;
+		paint?: LinePaintProps | FillPaintProps | CirclePaintProps | SymbolPaintProps;
+		layout?: LineLayoutProps | FillLayoutProps | CircleLayoutProps | SymbolLayoutProps;
 		hovered?: MapGeoJSONFeature | undefined;
 		selected?: MapGeoJSONFeature | undefined;
 

components/src/utils/getEmbedContext.js

@@ -5,24 +5,23 @@
  */
 
 const getEmbedContext = (target) => {
-  let url;
-  if (
-    import.meta.env.DEV ||
-    window.location.origin === 'https://d.swr.de' ||
-    window.location.origin === 'https://static.datenhub.net' ||
-    window.location.href.includes('apidata.googleusercontent.com') ||
-    window.location.href.includes('storage.googleapis.com')
-  ) {
-    url = window.location.href;
-  } else {
-    const parent = target.parentNode || target.parentNode.parentNode;
-    url = parent.dataset.url;
-  }
-  const data = {};
-  for (const [key, value] of new URL(url).searchParams) {
-    data[key] = value;
-  }
-  return data;
+	let url;
+	if (
+		window.location.origin === 'https://d.swr.de' ||
+		window.location.origin === 'https://static.datenhub.net' ||
+		window.location.href.includes('apidata.googleusercontent.com') ||
+		window.location.href.includes('storage.googleapis.com')
+	) {
+		url = window.location.href;
+	} else {
+		const parent = target.parentNode || target.parentNode.parentNode;
+		url = parent.dataset.url;
+	}
+	const data = {};
+	for (const [key, value] of new URL(url).searchParams) {
+		data[key] = value;
+	}
+	return data;
 };
 
 export default getEmbedContext;

components/svelte.config.js

@@ -1,11 +1,11 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: sveltePreprocess({ scss: true }),
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.