From 026767850341614ebca8a36873189852a9ee8d32 Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Wed, 30 Oct 2024 16:10:04 +1300 Subject: [PATCH] [Svelte]: Update svelte-web to work with Svelte5 --- package-lock.json | 645 +++++++++++------- package.json | 12 +- rollup.config.js | 4 +- src/components/svelte-web.ts | 61 +- .../tailwind/extractComponentStyles.js | 3 + 5 files changed, 433 insertions(+), 292 deletions(-) diff --git a/package-lock.json b/package-lock.json index e70e8730a..6dbe23f23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,8 @@ "license": "MIT", "dependencies": { "@storybook/test": "8.3.5", - "svelte": "4.2.19", - "svelte-preprocess": "5.1.4", + "svelte": "5.1.4", + "svelte-preprocess": "6.0.3", "tailwindcss": "3.2.6", "tslib": "2.5.0" }, @@ -37,8 +37,8 @@ "@storybook/addon-svelte-csf": "4.1.7", "@storybook/addon-themes": "8.3.5", "@storybook/preset-scss": "1.0.3", - "@storybook/svelte": "8.3.5", - "@storybook/svelte-vite": "8.3.5", + "@storybook/svelte": "8.3.6", + "@storybook/svelte-vite": "8.3.6", "@tsconfig/svelte": "5.0.4", "@types/jest": "29.5.13", "@types/jsdom": "21.1.7", @@ -62,8 +62,8 @@ "storybook": "8.3.5", "style-dictionary": "3.7.2", "style-loader": "3.3.4", - "svelte-check": "3.6.9", - "svelte-loader": "3.1.9", + "svelte-check": "4.0.5", + "svelte-loader": "3.2.4", "svelte2tsx": "0.7.22", "svg2vectordrawable": "2.9.1", "svgo": "3.0.2", @@ -101,11 +101,12 @@ "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==" }, "node_modules/@ampproject/remapping": { - "version": "2.2.1", - "license": "Apache-2.0", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", "dependencies": { - "@jridgewell/gen-mapping": "^0.3.0", - "@jridgewell/trace-mapping": "^0.3.9" + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" }, "engines": { "node": ">=6.0.0" @@ -1906,8 +1907,9 @@ } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "license": "MIT" + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", @@ -2011,6 +2013,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2031,6 +2034,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2051,6 +2055,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2071,6 +2076,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2091,6 +2097,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2111,6 +2118,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2131,6 +2139,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2151,6 +2160,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2171,6 +2181,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2191,6 +2202,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2211,6 +2223,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2231,6 +2244,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2692,45 +2706,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/@storybook/builder-vite": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.3.5.tgz", - "integrity": "sha512-paGX8tEmAeAKFU5Cnwkq3RAi3LFCnmjAxMJikT09jUi6jDpNa0VzH8jbLxKdjsPMAsz0Wv3mrLvL2b8hyxLWAw==", - "dev": true, - "dependencies": { - "@storybook/csf-plugin": "8.3.5", - "@types/find-cache-dir": "^3.2.1", - "browser-assert": "^1.2.1", - "es-module-lexer": "^1.5.0", - "express": "^4.19.2", - "find-cache-dir": "^3.0.0", - "fs-extra": "^11.1.0", - "magic-string": "^0.30.0", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "@preact/preset-vite": "*", - "storybook": "^8.3.5", - "typescript": ">= 4.3.x", - "vite": "^4.0.0 || ^5.0.0", - "vite-plugin-glimmerx": "*" - }, - "peerDependenciesMeta": { - "@preact/preset-vite": { - "optional": true - }, - "typescript": { - "optional": true - }, - "vite-plugin-glimmerx": { - "optional": true - } - } - }, "node_modules/@storybook/channels": { "version": "8.1.11", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-8.1.11.tgz", @@ -2763,19 +2738,6 @@ "url": "https://opencollective.com/storybook" } }, - "node_modules/@storybook/components": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.5.tgz", - "integrity": "sha512-Rq28YogakD3FO4F8KwAtGpo1g3t4V/gfCLqTQ8B6oQUFoxLqegkWk/DlwCzvoJndXuQJfdSyM6+r1JcA4Nql5A==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^8.3.5" - } - }, "node_modules/@storybook/core": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.5.tgz", @@ -2884,19 +2846,6 @@ "storybook": "^8.3.5" } }, - "node_modules/@storybook/manager-api": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.5.tgz", - "integrity": "sha512-fEQoKKi7h7pzh2z9RfuzatJxubrsfL/CB99fNXQ0wshMSY/7O4ckd18pK4fzG9ErnCtLAO9qsim4N/4eQC+/8Q==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^8.3.5" - } - }, "node_modules/@storybook/preset-scss": { "version": "1.0.3", "dev": true, @@ -2907,19 +2856,6 @@ "style-loader": "*" } }, - "node_modules/@storybook/preview-api": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.5.tgz", - "integrity": "sha512-VPqpudE8pmjTLvdNJoW/2//nqElDgUOmIn3QxbbCmdZTHDg5tFtxuqwdlNfArF0TxvTSBDIulXt/Q6K56TAfTg==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^8.3.5" - } - }, "node_modules/@storybook/react-dom-shim": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.5.tgz", @@ -2955,16 +2891,16 @@ } }, "node_modules/@storybook/svelte": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-8.3.5.tgz", - "integrity": "sha512-k+SgWwEoVg8m6uaXQeURyRKgf9AY0u5h/d1wui96Sfoc1Da9CZaqCXXQuo9LKBSmfmz4yx5QyeRPzsvyZQLQbA==", + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-8.3.6.tgz", + "integrity": "sha512-8rIj5nJbZWqT4ZGklp/CI821bWKyFvMsa3VMWO1i5scWjEXV6ga97agYV6tefQ4Zqc0IZdvTyOrW76sjoRawjw==", "dev": true, "dependencies": { - "@storybook/components": "^8.3.5", + "@storybook/components": "^8.3.6", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "^8.3.5", - "@storybook/preview-api": "^8.3.5", - "@storybook/theming": "^8.3.5", + "@storybook/manager-api": "^8.3.6", + "@storybook/preview-api": "^8.3.6", + "@storybook/theming": "^8.3.6", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.0.0", "type-fest": "~2.19" @@ -2977,18 +2913,18 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.5", + "storybook": "^8.3.6", "svelte": "^4.0.0 || ^5.0.0-next.65" } }, "node_modules/@storybook/svelte-vite": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-8.3.5.tgz", - "integrity": "sha512-oDF0UCD91beIyYVPsrgTsf3zycqs4DNJfObLH+VNOd/l5RV15v5nDi18Uf7s00h+5/UyqZJhWOsKdBGNJtDPoQ==", + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-8.3.6.tgz", + "integrity": "sha512-XeHo8hyqPs9YX/MWcqh9mdlSYYy5rwuOKEu5eDlIQeG/3VkHSklFyiIAiJ41fNSlYXYGTguahqIrinHB3cCCsw==", "dev": true, "dependencies": { - "@storybook/builder-vite": "8.3.5", - "@storybook/svelte": "8.3.5", + "@storybook/builder-vite": "8.3.6", + "@storybook/svelte": "8.3.6", "magic-string": "^0.30.0", "svelte-preprocess": "^5.1.1", "sveltedoc-parser": "^4.2.1", @@ -3003,11 +2939,180 @@ }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0", - "storybook": "^8.3.5", + "storybook": "^8.3.6", "svelte": "^4.0.0 || ^5.0.0-next.65", "vite": "^4.0.0 || ^5.0.0" } }, + "node_modules/@storybook/svelte-vite/node_modules/@storybook/builder-vite": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.3.6.tgz", + "integrity": "sha512-AF4+oFe1mvIHrLvaYsv8B0YSlXQtSlKTKwrXnUbcAbeGRwMmFKA1t3VyAcXV0yB9MtZ8YJsA/uKRkgGEaN7wJQ==", + "dev": true, + "dependencies": { + "@storybook/csf-plugin": "8.3.6", + "@types/find-cache-dir": "^3.2.1", + "browser-assert": "^1.2.1", + "es-module-lexer": "^1.5.0", + "express": "^4.19.2", + "find-cache-dir": "^3.0.0", + "fs-extra": "^11.1.0", + "magic-string": "^0.30.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "@preact/preset-vite": "*", + "storybook": "^8.3.6", + "typescript": ">= 4.3.x", + "vite": "^4.0.0 || ^5.0.0", + "vite-plugin-glimmerx": "*" + }, + "peerDependenciesMeta": { + "@preact/preset-vite": { + "optional": true + }, + "typescript": { + "optional": true + }, + "vite-plugin-glimmerx": { + "optional": true + } + } + }, + "node_modules/@storybook/svelte-vite/node_modules/@storybook/builder-vite/node_modules/@storybook/csf-plugin": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.6.tgz", + "integrity": "sha512-TJyJPFejO6Gyr3+bXqE/+LomQbivvfHEbee/GwtlRj0XF4KQlqnvuEdEdcK25JbD0NXT8AbyncEUmjoxE7ojQw==", + "dev": true, + "dependencies": { + "unplugin": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.6" + } + }, + "node_modules/@storybook/svelte-vite/node_modules/svelte-preprocess": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz", + "integrity": "sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@types/pug": "^2.0.6", + "detect-indent": "^6.1.0", + "magic-string": "^0.30.5", + "sorcery": "^0.11.0", + "strip-indent": "^3.0.0" + }, + "engines": { + "node": ">= 16.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.10.2", + "coffeescript": "^2.5.1", + "less": "^3.11.3 || ^4.0.0", + "postcss": "^7 || ^8", + "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0", + "pug": "^3.0.0", + "sass": "^1.26.8", + "stylus": "^0.55.0", + "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0", + "typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "coffeescript": { + "optional": true + }, + "less": { + "optional": true + }, + "postcss": { + "optional": true + }, + "postcss-load-config": { + "optional": true + }, + "pug": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/@storybook/svelte/node_modules/@storybook/components": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.6.tgz", + "integrity": "sha512-TXuoGZY7X3iixF45lXkYOFk8k2q9OHcqHyHyem1gATLLQXgyOvDgzm+VB7uKBNzssRQPEE+La70nfG8bq/viRw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.6" + } + }, + "node_modules/@storybook/svelte/node_modules/@storybook/manager-api": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.6.tgz", + "integrity": "sha512-Xt5VFZcL+G/9uzaHjzWFhxRNrP+4rPhSRKEvCZorAbC9+Hv+ZDs1JSZS5wMb4WKpXBZ0rwDVOLwngqbVtfRHuQ==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.6" + } + }, + "node_modules/@storybook/svelte/node_modules/@storybook/preview-api": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.6.tgz", + "integrity": "sha512-/Wxvb7wbI2O2iH63arRQQyyojA630vibdshkFjuC/u1nYdptEV1jkxa0OYmbZbKCn4/ze6uH4hfsKOpDPV9SWg==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.6" + } + }, + "node_modules/@storybook/svelte/node_modules/@storybook/theming": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.6.tgz", + "integrity": "sha512-LQjUk6GXRW9ELkoBKuqzQKFUW+ajfGPfVELcfs3/VQX61VhthJ4olov4bGPc04wsmmFMgN/qODxT485IwOHfPQ==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.6" + } + }, "node_modules/@storybook/test": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.3.5.tgz", @@ -3031,19 +3136,6 @@ "storybook": "^8.3.5" } }, - "node_modules/@storybook/theming": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.5.tgz", - "integrity": "sha512-9HmDDyC691oqfg4RziIM9ElsS2HITaxmH7n/yeUPtuirkPdAQzqOzhvH/Sa0qOhifzs8VjR+Gd/a/ZQ+S38r7w==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^8.3.5" - } - }, "node_modules/@storybook/types": { "version": "8.1.11", "resolved": "https://registry.npmjs.org/@storybook/types/-/types-8.1.11.tgz", @@ -3082,10 +3174,11 @@ "vite": "^4.0.0" } }, - "node_modules/@sveltejs/vite-plugin-svelte-inspector": { + "node_modules/@sveltejs/vite-plugin-svelte/node_modules/@sveltejs/vite-plugin-svelte-inspector": { "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz", + "integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==", "dev": true, - "license": "MIT", "peer": true, "dependencies": { "debug": "^4.3.4" @@ -3552,8 +3645,10 @@ "dev": true }, "node_modules/@types/pug": { - "version": "2.0.9", - "license": "MIT" + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz", + "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==", + "dev": true }, "node_modules/@types/q": { "version": "1.5.8", @@ -3989,6 +4084,14 @@ "node": ">=0.4.0" } }, + "node_modules/acorn-typescript": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz", + "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==", + "peerDependencies": { + "acorn": ">=8.9.0" + } + }, "node_modules/acorn-walk": { "version": "8.3.0", "dev": true, @@ -4190,10 +4293,11 @@ } }, "node_modules/axobject-query": { - "version": "4.0.0", - "license": "Apache-2.0", - "dependencies": { - "dequal": "^2.0.3" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", + "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==", + "engines": { + "node": ">= 0.4" } }, "node_modules/babel-jest": { @@ -4498,6 +4602,7 @@ }, "node_modules/balanced-match": { "version": "1.0.2", + "dev": true, "license": "MIT" }, "node_modules/better-opn": { @@ -4569,6 +4674,7 @@ }, "node_modules/brace-expansion": { "version": "1.1.11", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -4645,10 +4751,12 @@ } }, "node_modules/buffer-crc32": { - "version": "0.2.13", - "license": "MIT", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz", + "integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==", + "dev": true, "engines": { - "node": "*" + "node": ">=8.0.0" } }, "node_modules/buffer-from": { @@ -4899,24 +5007,6 @@ "node": ">= 4.0" } }, - "node_modules/code-red": { - "version": "1.0.4", - "license": "MIT", - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15", - "@types/estree": "^1.0.1", - "acorn": "^8.10.0", - "estree-walker": "^3.0.3", - "periscopic": "^3.1.0" - } - }, - "node_modules/code-red/node_modules/estree-walker": { - "version": "3.0.3", - "license": "MIT", - "dependencies": { - "@types/estree": "^1.0.0" - } - }, "node_modules/collect-v8-coverage": { "version": "1.0.2", "dev": true, @@ -4968,6 +5058,7 @@ }, "node_modules/concat-map": { "version": "0.0.1", + "dev": true, "license": "MIT" }, "node_modules/constant-case": { @@ -5187,6 +5278,7 @@ }, "node_modules/css-tree": { "version": "2.3.1", + "dev": true, "license": "MIT", "dependencies": { "mdn-data": "2.0.30", @@ -5406,7 +5498,9 @@ }, "node_modules/detect-indent": { "version": "6.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz", + "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==", + "dev": true, "engines": { "node": ">=8" } @@ -5678,7 +5772,9 @@ }, "node_modules/es6-promise": { "version": "3.3.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz", + "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==", + "dev": true }, "node_modules/esbuild": { "version": "0.18.20", @@ -6366,6 +6462,11 @@ "dev": true, "license": "ISC" }, + "node_modules/esm-env": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz", + "integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==" + }, "node_modules/espree": { "version": "9.2.0", "dev": true, @@ -6401,6 +6502,15 @@ "node": ">=0.10" } }, + "node_modules/esrap": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz", + "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15", + "@types/estree": "^1.0.1" + } + }, "node_modules/esrecurse": { "version": "4.3.0", "dev": true, @@ -6827,6 +6937,7 @@ }, "node_modules/fs.realpath": { "version": "1.0.0", + "dev": true, "license": "ISC" }, "node_modules/fsevents": { @@ -6930,6 +7041,7 @@ }, "node_modules/glob": { "version": "7.2.3", + "dev": true, "license": "ISC", "dependencies": { "fs.realpath": "^1.0.0", @@ -6986,7 +7098,8 @@ "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true }, "node_modules/has": { "version": "1.0.3", @@ -7306,6 +7419,7 @@ }, "node_modules/inflight": { "version": "1.0.6", + "dev": true, "license": "ISC", "dependencies": { "once": "^1.3.0", @@ -7471,7 +7585,8 @@ }, "node_modules/is-reference": { "version": "3.0.2", - "license": "MIT", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", + "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==", "dependencies": { "@types/estree": "*" } @@ -9778,13 +9893,11 @@ } }, "node_modules/magic-string": { - "version": "0.30.5", - "license": "MIT", + "version": "0.30.12", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz", + "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==", "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15" - }, - "engines": { - "node": ">=12" + "@jridgewell/sourcemap-codec": "^1.5.0" } }, "node_modules/make-dir": { @@ -9836,6 +9949,7 @@ }, "node_modules/mdn-data": { "version": "2.0.30", + "dev": true, "license": "CC0-1.0" }, "node_modules/media-typer": { @@ -9942,6 +10056,7 @@ }, "node_modules/minimatch": { "version": "3.1.2", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" @@ -9959,7 +10074,9 @@ }, "node_modules/mkdirp": { "version": "0.5.6", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dev": true, "dependencies": { "minimist": "^1.2.6" }, @@ -10116,6 +10233,7 @@ }, "node_modules/once": { "version": "1.4.0", + "dev": true, "license": "ISC", "dependencies": { "wrappy": "1" @@ -10309,6 +10427,7 @@ }, "node_modules/path-is-absolute": { "version": "1.0.1", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -10339,22 +10458,6 @@ "node": ">= 14.16" } }, - "node_modules/periscopic": { - "version": "3.1.0", - "license": "MIT", - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^3.0.0", - "is-reference": "^3.0.0" - } - }, - "node_modules/periscopic/node_modules/estree-walker": { - "version": "3.0.3", - "license": "MIT", - "dependencies": { - "@types/estree": "^1.0.0" - } - }, "node_modules/picocolors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", @@ -11062,6 +11165,19 @@ "node": ">=0.10.0" } }, + "node_modules/rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + } + }, "node_modules/rollup": { "version": "3.29.5", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", @@ -11171,7 +11287,9 @@ }, "node_modules/sander": { "version": "0.5.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz", + "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==", + "dev": true, "dependencies": { "es6-promise": "^3.1.2", "graceful-fs": "^4.1.3", @@ -11179,16 +11297,6 @@ "rimraf": "^2.5.2" } }, - "node_modules/sander/node_modules/rimraf": { - "version": "2.7.1", - "license": "ISC", - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - } - }, "node_modules/sass": { "version": "1.80.2", "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.2.tgz", @@ -11492,11 +11600,13 @@ } }, "node_modules/sorcery": { - "version": "0.11.0", - "license": "MIT", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.1.tgz", + "integrity": "sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==", + "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.14", - "buffer-crc32": "^0.2.5", + "buffer-crc32": "^1.0.0", "minimist": "^1.2.0", "sander": "^0.5.0" }, @@ -11818,49 +11928,105 @@ } }, "node_modules/svelte": { - "version": "4.2.19", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz", - "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==", - "license": "MIT", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.4.tgz", + "integrity": "sha512-qgHDV7AyvBZa2pbf+V0tnvWrN1LKD8LdUsBkR/SSYVVN6zXexiXnOy5Pjcjft2y/2NJJVa8ORUHFVn3oiWCLVQ==", "dependencies": { - "@ampproject/remapping": "^2.2.1", - "@jridgewell/sourcemap-codec": "^1.4.15", - "@jridgewell/trace-mapping": "^0.3.18", - "@types/estree": "^1.0.1", - "acorn": "^8.9.0", - "aria-query": "^5.3.0", - "axobject-query": "^4.0.0", - "code-red": "^1.0.3", - "css-tree": "^2.3.1", - "estree-walker": "^3.0.3", - "is-reference": "^3.0.1", + "@ampproject/remapping": "^2.3.0", + "@jridgewell/sourcemap-codec": "^1.5.0", + "@types/estree": "^1.0.5", + "acorn": "^8.12.1", + "acorn-typescript": "^1.4.13", + "aria-query": "^5.3.1", + "axobject-query": "^4.1.0", + "esm-env": "^1.0.0", + "esrap": "^1.2.2", + "is-reference": "^3.0.2", "locate-character": "^3.0.0", - "magic-string": "^0.30.4", - "periscopic": "^3.1.0" + "magic-string": "^0.30.11", + "zimmerframe": "^1.1.2" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/svelte-check": { - "version": "3.6.9", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.0.5.tgz", + "integrity": "sha512-icBTBZ3ibBaywbXUat3cK6hB5Du+Kq9Z8CRuyLmm64XIe2/r+lQcbuBx/IQgsbrC+kT2jQ0weVpZSSRIPwB6jQ==", "dev": true, - "license": "MIT", "dependencies": { - "@jridgewell/trace-mapping": "^0.3.17", - "chokidar": "^3.4.1", - "fast-glob": "^3.2.7", - "import-fresh": "^3.2.1", + "@jridgewell/trace-mapping": "^0.3.25", + "chokidar": "^4.0.1", + "fdir": "^6.2.0", "picocolors": "^1.0.0", - "sade": "^1.7.4", - "svelte-preprocess": "^5.1.3", - "typescript": "^5.0.3" + "sade": "^1.7.4" }, "bin": { "svelte-check": "bin/svelte-check" }, + "engines": { + "node": ">= 18.0.0" + }, + "peerDependencies": { + "svelte": "^4.0.0 || ^5.0.0-next.0", + "typescript": ">=5.0.0" + } + }, + "node_modules/svelte-check/node_modules/chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "dev": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/svelte-check/node_modules/fdir": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz", + "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", + "dev": true, "peerDependencies": { - "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0" + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/svelte-check/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/svelte-check/node_modules/readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "dev": true, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" } }, "node_modules/svelte-dev-helper": { @@ -11880,44 +12046,39 @@ } }, "node_modules/svelte-loader": { - "version": "3.1.9", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/svelte-loader/-/svelte-loader-3.2.4.tgz", + "integrity": "sha512-e0HdDnkYH/MDx4/IfTSka5AOFg9yYJcPuoZJB5x0l60fkHjVjNvrrxr+rJegDG9J7ZymmdHt00/hdLw+QF299w==", "dev": true, - "license": "MIT", "dependencies": { "loader-utils": "^2.0.4", "svelte-dev-helper": "^1.1.9", "svelte-hmr": "^0.14.2" }, "peerDependencies": { - "svelte": "^3.0.0 || ^4.0.0-next.0" + "svelte": "^3.0.0 || ^4.0.0-next.0 || ^5.0.0-next.1" } }, "node_modules/svelte-preprocess": { - "version": "5.1.4", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz", + "integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==", "hasInstallScript": true, - "license": "MIT", - "dependencies": { - "@types/pug": "^2.0.6", - "detect-indent": "^6.1.0", - "magic-string": "^0.30.5", - "sorcery": "^0.11.0", - "strip-indent": "^3.0.0" - }, "engines": { - "node": ">= 16.0.0" + "node": ">= 18.0.0" }, "peerDependencies": { "@babel/core": "^7.10.2", "coffeescript": "^2.5.1", "less": "^3.11.3 || ^4.0.0", "postcss": "^7 || ^8", - "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0", + "postcss-load-config": ">=3", "pug": "^3.0.0", "sass": "^1.26.8", - "stylus": "^0.55.0", + "stylus": ">=0.55", "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0", - "svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0", - "typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0" + "svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0", + "typescript": "^5.0.0" }, "peerDependenciesMeta": { "@babel/core": { @@ -11952,13 +12113,12 @@ } } }, - "node_modules/svelte/node_modules/estree-walker": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", - "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", - "license": "MIT", - "dependencies": { - "@types/estree": "^1.0.0" + "node_modules/svelte/node_modules/aria-query": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz", + "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==", + "engines": { + "node": ">= 0.4" } }, "node_modules/svelte2tsx": { @@ -12735,6 +12895,7 @@ "version": "5.2.2", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13324,6 +13485,7 @@ }, "node_modules/wrappy": { "version": "1.0.2", + "dev": true, "license": "ISC" }, "node_modules/write-file-atomic": { @@ -13437,6 +13599,11 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zimmerframe": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", + "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==" } } } diff --git a/package.json b/package.json index 88e7bb979..5b73657f9 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "type": "module", "dependencies": { "@storybook/test": "8.3.5", - "svelte": "4.2.19", - "svelte-preprocess": "5.1.4", + "svelte": "5.1.4", + "svelte-preprocess": "6.0.3", "tailwindcss": "3.2.6", "tslib": "2.5.0" }, @@ -30,8 +30,8 @@ "@storybook/addon-svelte-csf": "4.1.7", "@storybook/addon-themes": "8.3.5", "@storybook/preset-scss": "1.0.3", - "@storybook/svelte": "8.3.5", - "@storybook/svelte-vite": "8.3.5", + "@storybook/svelte": "8.3.6", + "@storybook/svelte-vite": "8.3.6", "@tsconfig/svelte": "5.0.4", "@types/jest": "29.5.13", "@types/jsdom": "21.1.7", @@ -55,8 +55,8 @@ "storybook": "8.3.5", "style-dictionary": "3.7.2", "style-loader": "3.3.4", - "svelte-check": "3.6.9", - "svelte-loader": "3.1.9", + "svelte-check": "4.0.5", + "svelte-loader": "3.2.4", "svelte2tsx": "0.7.22", "svg2vectordrawable": "2.9.1", "svgo": "3.0.2", diff --git a/rollup.config.js b/rollup.config.js index ed8f3a1e9..260ef8e07 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -66,7 +66,9 @@ export default { // Don't emit CSS - it doesn't work properly with Web Components. emitCss: false, compilerOptions: { - customElement: false + customElement: false, + css: 'injected', + accessors: true, }, onwarn }), diff --git a/src/components/svelte-web.ts b/src/components/svelte-web.ts index da11fdbcd..baa036bd3 100644 --- a/src/components/svelte-web.ts +++ b/src/components/svelte-web.ts @@ -1,4 +1,5 @@ import type { SvelteComponent } from 'svelte' +import { mount, unmount } from 'svelte'; interface Options { mode: 'open' | 'closed' @@ -11,40 +12,6 @@ const eventRegex = /^on[A-Z]/ // Properties with these types should be reflected to attributes. const reflectToAttributes = new Set(['string', 'number', 'boolean']) -/** - * This function creates a faux Svelte component which forwards WebComponent - * slots into a Svelte slot. - * @param name The name of the slot - * @returns A Svelte "component" representing the slot. - */ -const createSlot = (name?: string) => { - let slot: HTMLElement - return { - // Create - c() { - slot = document.createElement('slot') - if (name) { - slot.setAttribute('name', name) - } - }, - - // Mount - m(target, anchor) { - target.insertBefore(slot, anchor || null) - }, - - // Props changed - p() {}, - - // Detach - d(detaching) { - if (detaching && slot.parentNode) { - slot.parentNode.removeChild(slot) - } - } - } -} - /** * Generate a selector for an element - note: This is pretty limited at the * moment and will only work if the element has a unique id/class. However, for @@ -80,10 +47,10 @@ export default function registerWebComponent( // Create & mount a dummy component. We use this to work out what props are // available and generate a list of available properties. - const c = new component({ target: document.createElement('div') }) + const c = mount(component, { target: document.createElement('div') }) // The names of all properties on our Svelte component. - const props = Object.keys(c.$$.props) + const props = Object.keys(c) // All the event names in our Svelte component. Maps the HTMLEventType string // to the Svelte prop (i.e. click: onClick). @@ -106,7 +73,7 @@ export default function registerWebComponent( // We need to handle boolean attributes specially, as the presence/absence of the attribute indicates the value. const boolProperties = new Set( - props.filter((p) => typeof c.$$.ctx[c.$$.props[p]] === 'boolean') + props.filter((p) => typeof c[p] === 'boolean') ) type Callback = (...args: any[]) => void @@ -161,7 +128,12 @@ export default function registerWebComponent( const slots = slotsNames.reduce( (prev, next) => ({ ...prev, - [next ?? 'default']: [() => createSlot(next)] + [next ?? 'default']: ($$anchor) => { + const slot = document.createElement('slot') + if (next) slot.setAttribute('name', next) + + $$anchor?.before(slot) + } }), {} ) @@ -186,10 +158,10 @@ export default function registerWebComponent( // content in the output Svelte compiles to. This is a problem // even when not doing crazy things: // https://github.com/sveltejs/svelte/issues/5312 - this.component?.$destroy() + if (this.component) unmount(this.component) // Finally, we actually create the component - this.component = new component({ + this.component = mount(component, { // Target this shadowDOM, so we get nicely encapsulated // styles target: this.shadowRoot, @@ -211,7 +183,7 @@ export default function registerWebComponent( if (restoreFocus) { const restoreTo = this.shadowRoot.querySelector(restoreFocus) - ;(restoreTo as HTMLElement)?.focus?.() + ; (restoreTo as HTMLElement)?.focus?.() } } @@ -248,10 +220,7 @@ export default function registerWebComponent( Object.defineProperty(this, prop, { enumerable: true, get() { - // $$.props is { [propertyName: string]: number } where the number - // is the array index into $$.ctx that the value is stored in. - const contextIndex = this.component?.$$.props[prop] - return this.component?.$$.ctx[contextIndex] + return this.component?.[prop] ?? this.#propsCache[prop] }, set(value) { if (reflectToAttributes.has(typeof value)) { @@ -269,7 +238,7 @@ export default function registerWebComponent( // |.$set| updates the value of a prop. Note: This only works for // props, not slotted content. - this.component?.$set({ [prop]: value }) + if (this.component) this.component[prop] = value } }) } diff --git a/src/tokens/transformation/tailwind/extractComponentStyles.js b/src/tokens/transformation/tailwind/extractComponentStyles.js index d9ac69c8c..dffc24c23 100644 --- a/src/tokens/transformation/tailwind/extractComponentStyles.js +++ b/src/tokens/transformation/tailwind/extractComponentStyles.js @@ -52,6 +52,9 @@ module.exports = { } ) + // TODO: Beg Jacob for help + return; + const { css: { code: rawCSS } } = svelte.compile(Component, {