From 31748c133aa09097a790ec7ceecb44ff97b37e9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Sun, 19 Nov 2023 01:55:55 +0100 Subject: [PATCH] feat(up): upgrade dependencies; improve repl; fix lint & tests --- docs/package.json | 8 +- eslint.config.js | 1 + examples/astro-svelte/package.json | 6 +- examples/astro-vue/package.json | 6 +- examples/astro/package.json | 4 +- examples/nuxt/package.json | 2 +- examples/sveltekit/package.json | 10 +- examples/vite-lib/package.json | 2 +- examples/vite-lit/package.json | 4 +- examples/vite-preact/package.json | 8 +- examples/vite-react/package.json | 6 +- examples/vite-solid/package.json | 6 +- examples/vite-svelte/package.json | 10 +- examples/vite-svelte/src/App.svelte | 2 +- examples/vite-vue/app.vue | 21 - examples/vite-vue/package.json | 8 +- integrations/astro/package.json | 2 +- integrations/astro/src/index.ts | 1 - integrations/browser/package.json | 4 +- integrations/language-server/package.json | 8 +- .../src/features/completion.ts | 7 +- .../language-server/src/features/tokens.ts | 8 +- integrations/language-server/src/index.ts | 2 +- integrations/language-server/src/manager.ts | 4 +- .../src/utils/findStringRange.ts | 2 +- .../src/utils/getCurrentLine.ts | 2 +- .../src/utils/getHoveredToken.ts | 4 +- integrations/nuxt/package.json | 12 +- integrations/react/package.json | 2 +- integrations/repl/package.json | 42 +- integrations/repl/src/compiler/index.ts | 2 + integrations/repl/src/components/Button.vue | 14 + .../repl/src/components/ColoredEllipse.vue | 14 + .../repl/src/components/ConfigPanel.vue | 21 + integrations/repl/src/components/Dropdown.vue | 1 + integrations/repl/src/components/Repl.vue | 254 +- integrations/repl/src/components/Tabs.vue | 111 + integrations/repl/src/components/Toggle.vue | 61 + integrations/repl/src/components/TopBar.vue | 88 +- .../repl/src/components/VersionSelect.vue | 3 +- .../src/components/editor/ConfigToggle.vue | 49 + .../src/components/editor/EditorContainer.vue | 38 +- .../src/components/editor/FileSelector.vue | 204 +- .../src/components/editor/FrameworkSelect.vue | 55 + .../components/editor/FrameworkSelector.vue | 12 - .../editor/FrameworkVersionSelect.vue | 25 + .../src/components/editor/LayoutToggle.vue | 42 + .../src/components/editor/MonacoEditor.vue | 2 +- .../src/components/editor/PinceauSelect.vue | 29 + .../repl/src/components/editor/Toolbar.vue | 87 - .../components/editor/TypescriptSelect.vue | 19 + .../repl/src/components/monaco/Monaco.vue | 24 +- .../repl/src/components/monaco/cdn.ts | 10 +- .../repl/src/components/monaco/env.ts | 192 +- .../repl/src/components/monaco/utils.ts | 3 - .../src/components/monaco/volar.worker.ts | 6 - .../output/FilesOutputContainer.vue | 5 - .../repl/src/components/output/Output.vue | 99 +- .../repl/src/components/output/Preview.vue | 265 +- integrations/repl/src/store/index.ts | 350 +- integrations/repl/src/store/pinceau.ts | 36 +- integrations/repl/src/store/react.ts | 52 +- integrations/repl/src/store/session.ts | 122 + integrations/repl/src/store/svelte.ts | 54 +- integrations/repl/src/store/vue.ts | 83 +- integrations/repl/src/transforms/index.ts | 46 +- integrations/repl/src/transforms/react.ts | 6 +- integrations/repl/src/transforms/svelte.ts | 8 +- integrations/repl/src/transforms/vue.ts | 22 +- integrations/repl/test/App.vue | 31 +- integrations/repl/test/main.ts | 59 - integrations/repl/tsconfig.json | 9 +- integrations/repl/vite.config.ts | 36 + integrations/svelte/build.config.ts | 2 - integrations/svelte/package.json | 4 +- .../src/transforms/write-script-features.ts | 2 +- integrations/vscode/package.json | 8 +- integrations/vue/src/transforms/variants.ts | 4 +- .../src/transforms/write-script-features.ts | 2 +- package.json | 23 +- packages/configs/tsconfig.base.json | 2 +- packages/core/package.json | 10 +- packages/core/src/types/core-context.ts | 2 +- packages/core/src/types/transform-context.ts | 2 +- packages/core/src/types/transforms.ts | 2 +- packages/core/src/utils/core-context.ts | 4 +- packages/core/src/utils/debug.ts | 2 +- packages/core/src/utils/tokens-path.ts | 18 +- packages/palette/package.json | 2 +- packages/runtime/package.json | 2 +- packages/runtime/src/types/sheets.ts | 6 +- packages/runtime/src/utils/runtime-sheet.ts | 6 +- packages/stringify/package.json | 2 +- packages/style/package.json | 2 +- packages/style/src/transforms/suite.ts | 2 +- packages/style/src/types/css.ts | 36 +- packages/style/src/types/csstype.ts | 10 +- packages/style/src/types/format-utils.ts | 6 +- packages/style/src/types/properties.ts | 8 +- packages/style/src/utils/styled-component.ts | 4 +- packages/theme/package.json | 2 +- packages/theme/src/types/definitions.ts | 2 +- packages/theme/src/types/options.ts | 2 +- packages/theme/src/utils/config-layers.ts | 2 +- packages/theme/src/utils/config-utils.ts | 2 +- packages/theme/src/utils/theme-helper.ts | 2 +- packages/theme/src/utils/tokens.ts | 8 +- pnpm-lock.yaml | 4407 +++++++++-------- tests/fixtures.config.ts | 2 +- tests/fixtures/components/svelte/package.json | 8 +- tests/package.json | 12 +- tests/unit.config.ts | 2 +- tests/unit/theme.test.ts | 10 +- 113 files changed, 4008 insertions(+), 3479 deletions(-) create mode 100644 integrations/repl/src/components/Button.vue create mode 100644 integrations/repl/src/components/ColoredEllipse.vue create mode 100644 integrations/repl/src/components/ConfigPanel.vue create mode 100644 integrations/repl/src/components/Tabs.vue create mode 100644 integrations/repl/src/components/Toggle.vue create mode 100644 integrations/repl/src/components/editor/ConfigToggle.vue create mode 100644 integrations/repl/src/components/editor/FrameworkSelect.vue delete mode 100644 integrations/repl/src/components/editor/FrameworkSelector.vue create mode 100644 integrations/repl/src/components/editor/FrameworkVersionSelect.vue create mode 100644 integrations/repl/src/components/editor/LayoutToggle.vue create mode 100644 integrations/repl/src/components/editor/PinceauSelect.vue delete mode 100644 integrations/repl/src/components/editor/Toolbar.vue create mode 100644 integrations/repl/src/components/editor/TypescriptSelect.vue delete mode 100644 integrations/repl/src/components/output/FilesOutputContainer.vue create mode 100644 integrations/repl/src/store/session.ts diff --git a/docs/package.json b/docs/package.json index cce8aaaf..97c401d9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,14 +11,14 @@ "preview": "nuxt preview" }, "devDependencies": { - "@nuxt/content": "^2.8.5", + "@nuxt/content": "^2.9.0", "@nuxt/devtools": "latest", "@pinceau/nuxt": "workspace:*", "@pinceau/palette": "workspace:*", "@vueuse/motion": "^2.0.0", - "nuxt": "^3.8.0", - "nuxt-icon": "^0.5.0", - "vue": "^3.3.6", + "nuxt": "^3.8.1", + "nuxt-icon": "^0.6.6", + "vue": "^3.3.8", "vue-router": "^4.2.5" } } diff --git a/eslint.config.js b/eslint.config.js index 629c7905..e81d9c0c 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -17,6 +17,7 @@ export default antfu( 'jsdoc/require-returns': 'off', 'ts/no-namespace': 'off', 'new-cap': 'off', + 'vue/require-explicit-emits': 'off', }, }, { diff --git a/examples/astro-svelte/package.json b/examples/astro-svelte/package.json index 0b419287..fe546a3b 100644 --- a/examples/astro-svelte/package.json +++ b/examples/astro-svelte/package.json @@ -10,15 +10,15 @@ "start": "astro dev --port=3000" }, "dependencies": { - "vue": "^3.3.6" + "vue": "^3.3.8" }, "devDependencies": { - "@astrojs/svelte": "^4.0.3", + "@astrojs/svelte": "^4.0.4", "@pinceau/astro": "workspace:*", "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/svelte": "workspace:*", - "astro": "^3.3.2" + "astro": "^3.5.5" }, "stackblitz": { "installDependencies": false, diff --git a/examples/astro-vue/package.json b/examples/astro-vue/package.json index 81c847ad..7f05aeb8 100644 --- a/examples/astro-vue/package.json +++ b/examples/astro-vue/package.json @@ -10,15 +10,15 @@ "start": "astro dev --port=3000" }, "dependencies": { - "vue": "^3.3.6" + "vue": "^3.3.8" }, "devDependencies": { - "@astrojs/vue": "^3.0.1", + "@astrojs/vue": "^3.0.4", "@pinceau/astro": "workspace:*", "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/vue": "workspace:*", - "astro": "^3.3.2" + "astro": "^3.5.5" }, "stackblitz": { "installDependencies": false, diff --git a/examples/astro/package.json b/examples/astro/package.json index 83a57109..18e9dd7d 100644 --- a/examples/astro/package.json +++ b/examples/astro/package.json @@ -11,8 +11,8 @@ }, "devDependencies": { "@pinceau/astro": "workspace:*", - "astro": "^3.3.2", - "canvas-confetti": "^1.9.0" + "astro": "^3.5.5", + "canvas-confetti": "^1.9.1" }, "stackblitz": { "installDependencies": false, diff --git a/examples/nuxt/package.json b/examples/nuxt/package.json index b3af5f18..952e1037 100644 --- a/examples/nuxt/package.json +++ b/examples/nuxt/package.json @@ -14,7 +14,7 @@ "devDependencies": { "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", - "@pinceau/outputs": "workspace:*", "nuxt": "^3.8.0" + "@pinceau/outputs": "workspace:*", "nuxt": "^3.8.1" }, "stackblitz": { "installDependencies": false, diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json index 3e9e7637..191c4388 100644 --- a/examples/sveltekit/package.json +++ b/examples/sveltekit/package.json @@ -13,13 +13,13 @@ "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/svelte": "workspace:*", - "@sveltejs/adapter-auto": "^2.1.0", - "@sveltejs/kit": "^1.26.0", - "svelte": "^4.2.2", - "svelte-check": "^3.5.2", + "@sveltejs/adapter-auto": "^2.1.1", + "@sveltejs/kit": "^1.27.6", + "svelte": "^4.2.5", + "svelte-check": "^3.6.0", "tslib": "^2.6.2", "typescript": "^5.2.2", - "vite": "4.5.0" + "vite": "5.0.0" }, "stackblitz": { "installDependencies": false, diff --git a/examples/vite-lib/package.json b/examples/vite-lib/package.json index 2647df64..e9497bca 100644 --- a/examples/vite-lib/package.json +++ b/examples/vite-lib/package.json @@ -15,6 +15,6 @@ "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^5.0.0" } } diff --git a/examples/vite-lit/package.json b/examples/vite-lit/package.json index f825da43..1e952c3f 100644 --- a/examples/vite-lit/package.json +++ b/examples/vite-lit/package.json @@ -16,14 +16,14 @@ "dev": "vite --port=3000" }, "dependencies": { - "lit": "^3.0.0" + "lit": "^3.1.0" }, "devDependencies": { "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "pinceau": "workspace:*", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^5.0.0" }, "stackblitz": { "installDependencies": false, diff --git a/examples/vite-preact/package.json b/examples/vite-preact/package.json index f1e7465e..77db993e 100644 --- a/examples/vite-preact/package.json +++ b/examples/vite-preact/package.json @@ -11,17 +11,17 @@ "preview": "vite preview" }, "dependencies": { - "preact": "^10.18.1" + "preact": "^10.19.2" }, "devDependencies": { "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/react": "workspace:*", - "@preact/preset-vite": "^2.6.0", - "@prefresh/vite": "^2.4.1", + "@preact/preset-vite": "^2.7.0", + "@prefresh/vite": "^2.4.4", "cross-env": "^7.0.3", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^5.0.0" }, "stackblitz": { "installDependencies": false, diff --git a/examples/vite-react/package.json b/examples/vite-react/package.json index e322024b..8a90f33b 100644 --- a/examples/vite-react/package.json +++ b/examples/vite-react/package.json @@ -19,13 +19,13 @@ "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/react": "workspace:*", - "@types/node": "20.8.7", + "@types/node": "20.9.2", "@types/react": "latest", "@types/react-dom": "latest", - "@vitejs/plugin-react": "^4.1.0", + "@vitejs/plugin-react": "^4.2.0", "cross-env": "^7.0.3", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^5.0.0" }, "stackblitz": { "installDependencies": false, diff --git a/examples/vite-solid/package.json b/examples/vite-solid/package.json index 176a58ab..52d1fee2 100644 --- a/examples/vite-solid/package.json +++ b/examples/vite-solid/package.json @@ -10,15 +10,15 @@ "serve": "vite preview" }, "dependencies": { - "solid-js": "^1.8.3" + "solid-js": "^1.8.5" }, "devDependencies": { "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/react": "workspace:*", "typescript": "^5.2.2", - "vite": "^4.5.0", - "vite-plugin-inspect": "^0.7.40", + "vite": "^5.0.0", + "vite-plugin-inspect": "^0.7.42", "vite-plugin-solid": "^2.7.2" }, "stackblitz": { diff --git a/examples/vite-svelte/package.json b/examples/vite-svelte/package.json index b5c12269..6c5e18cd 100644 --- a/examples/vite-svelte/package.json +++ b/examples/vite-svelte/package.json @@ -15,13 +15,13 @@ "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/svelte": "workspace:*", - "@sveltejs/vite-plugin-svelte": "^2.4.6", - "svelte": "^4.2.2", - "svelte-check": "^3.5.2", - "svelte-preprocess": "^5.0.4", + "@sveltejs/vite-plugin-svelte": "^3.0.0", + "svelte": "^4.2.5", + "svelte-check": "^3.6.0", + "svelte-preprocess": "^5.1.0", "tslib": "^2.6.2", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^5.0.0" }, "stackblitz": { "installDependencies": false, diff --git a/examples/vite-svelte/src/App.svelte b/examples/vite-svelte/src/App.svelte index 7453274c..d751e3a8 100644 --- a/examples/vite-svelte/src/App.svelte +++ b/examples/vite-svelte/src/App.svelte @@ -35,7 +35,7 @@
Hello world
- + hello
diff --git a/examples/vite-vue/app.vue b/examples/vite-vue/app.vue index f075e17a..ab140569 100644 --- a/examples/vite-vue/app.vue +++ b/examples/vite-vue/app.vue @@ -49,24 +49,3 @@ const CircleComponent = $styled.div<{ color: 'red' | 'blue' }>({
- - diff --git a/examples/vite-vue/package.json b/examples/vite-vue/package.json index df15acf2..9c4c9639 100644 --- a/examples/vite-vue/package.json +++ b/examples/vite-vue/package.json @@ -9,8 +9,8 @@ "preview": "vite preview" }, "dependencies": { - "@vueuse/core": "^10.5.0", - "vue": "^3.3.6", + "@vueuse/core": "^10.6.1", + "vue": "^3.3.8", "vue-router": "^4.2.5" }, "devDependencies": { @@ -18,9 +18,9 @@ "@pinceau/palette": "workspace:*", "@pinceau/outputs": "workspace:*", "@pinceau/vue": "workspace:*", - "@vitejs/plugin-vue": "^4.4.0", + "@vitejs/plugin-vue": "^4.5.0", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^5.0.0" }, "stackblitz": { "installDependencies": false, diff --git a/integrations/astro/package.json b/integrations/astro/package.json index 8f2679f9..a0cfa5f2 100644 --- a/integrations/astro/package.json +++ b/integrations/astro/package.json @@ -44,7 +44,7 @@ "dependencies": { "@pinceau/core": "workspace:*", "@pinceau/integration": "workspace:*", - "acorn": "^8.10.0" + "acorn": "^8.11.2" }, "devDependencies": { "@pinceau/configs": "workspace:*" diff --git a/integrations/astro/src/index.ts b/integrations/astro/src/index.ts index ee0e726b..62bb04d9 100644 --- a/integrations/astro/src/index.ts +++ b/integrations/astro/src/index.ts @@ -1,4 +1,3 @@ -import type { PinceauPluginsOptions } from '@pinceau/core' import type { PinceauAstroOptions } from './types' declare module '@pinceau/core' { diff --git a/integrations/browser/package.json b/integrations/browser/package.json index 951a5f73..9316113a 100644 --- a/integrations/browser/package.json +++ b/integrations/browser/package.json @@ -79,8 +79,8 @@ "@pinceau/svelte": "workspace:*", "@pinceau/theme": "workspace:*", "@pinceau/vue": "workspace:*", - "jiti": "^1.20.0", - "tsup": "^7.2.0" + "jiti": "^1.21.0", + "tsup": "^7.3.0" }, "dependencies": { "esbuild-plugin-pipe": "^0.2.0", diff --git a/integrations/language-server/package.json b/integrations/language-server/package.json index a5441a51..aa4025ce 100644 --- a/integrations/language-server/package.json +++ b/integrations/language-server/package.json @@ -30,8 +30,8 @@ "@pinceau/theme": "workspace:*", "@pinceau/core": "workspace:*", "@pinceau/style": "workspace:*", - "@vue/compiler-sfc": "^3.3.6", - "fast-glob": "^3.3.1", + "@vue/compiler-sfc": "^3.3.8", + "fast-glob": "^3.3.2", "line-column": "^1.0.2", "tinycolor2": "1.6.0", "vscode-languageserver": "^9.0.1", @@ -40,7 +40,7 @@ }, "devDependencies": { "@pinceau/configs": "workspace:*", - "@types/line-column": "^1.0.1", - "@types/tinycolor2": "^1.4.5" + "@types/line-column": "^1.0.2", + "@types/tinycolor2": "^1.4.6" } } diff --git a/integrations/language-server/src/features/completion.ts b/integrations/language-server/src/features/completion.ts index b8e835f0..e6e94f2c 100644 --- a/integrations/language-server/src/features/completion.ts +++ b/integrations/language-server/src/features/completion.ts @@ -1,11 +1,10 @@ import type { CompletionItem, TextDocumentPositionParams } from 'vscode-languageserver' import type { PinceauExtension } from '..' -import { getCursorContext } from '../utils/getCursorContext' export function registerCompletion( context: PinceauExtension, ) { - const { connection, documents, tokensManager, documentReady, rootPath, getStyleFunctions } = context + const { connection, documents, documentReady } = context // This handler provides the initial list of the completion items. connection.onCompletion(async (textDocumentPosition: TextDocumentPositionParams): Promise => { @@ -14,9 +13,9 @@ export function registerCompletion( const doc = documents.get(textDocumentPosition.textDocument.uri) if (!doc) { return [] } - const styleFns = getStyleFunctions(doc) + // const styleFns = getStyleFunctions(doc) - const { isInStringExpression, isOffsetOnStyleTsTag, isTokenFunctionCall } = getCursorContext(doc, textDocumentPosition.position, styleFns) + // const { isInStringExpression, isOffsetOnStyleTsTag, isTokenFunctionCall } = getCursorContext(doc, textDocumentPosition.position, styleFns) // Create completion symbols const items: CompletionItem[] = [] diff --git a/integrations/language-server/src/features/tokens.ts b/integrations/language-server/src/features/tokens.ts index c0dd7fe0..90d10e35 100644 --- a/integrations/language-server/src/features/tokens.ts +++ b/integrations/language-server/src/features/tokens.ts @@ -55,7 +55,7 @@ export function setupTokensHelpers( doc: TextDocument, _styleFns?: PinceauStyleFunctionContext[], settings?: PinceauVSCodeSettings, - onToken?: (token: { match: RegExpMatchArray; tokenPath: string; range: Range; settings?: PinceauVSCodeSettings; token?: DesignToken; localToken?: any }) => void, + onToken?: (token: { match: RegExpMatchArray, tokenPath: string, range: Range, settings?: PinceauVSCodeSettings, token?: DesignToken, localToken?: any }) => void, ) { const colors: ColorInformation[] = [] @@ -110,12 +110,12 @@ export function setupTokensHelpers( ) { const toRet: { delimiter: string - currentLine?: { text: string; range: { start: number; end: number } } - currentToken?: { token: string; range: { start: number; end: number } } + currentLine?: { text: string, range: { start: number, end: number } } + currentToken?: { token: string, range: { start: number, end: number } } closestToken?: any token?: any localToken?: any - lineRange?: { start: number; end: number } + lineRange?: { start: number, end: number } } = { delimiter: '$', currentToken: undefined, diff --git a/integrations/language-server/src/index.ts b/integrations/language-server/src/index.ts index f7486510..951d3fda 100644 --- a/integrations/language-server/src/index.ts +++ b/integrations/language-server/src/index.ts @@ -10,7 +10,7 @@ import { setupExtension } from './config' import { setupTokensHelpers } from './features/tokens' import * as features from './features' -export interface DocumentTokensData { version: number; styleFns: PinceauStyleFunctionContext[] } +export interface DocumentTokensData { version: number, styleFns: PinceauStyleFunctionContext[] } export { PinceauTokensManager, setupExtension, setupTokensHelpers, features } diff --git a/integrations/language-server/src/manager.ts b/integrations/language-server/src/manager.ts index f485f4d5..ead4b174 100644 --- a/integrations/language-server/src/manager.ts +++ b/integrations/language-server/src/manager.ts @@ -36,8 +36,8 @@ async function globRequire(folderPath: string, globPaths: string[], cb: (filePat export default class PinceauTokensManager { public initialized = false public synchronizing: Promise | false = false - private tokensCache = new CacheManager() - private transformCache = new CacheManager<{ version: number; styleFns: PinceauStyleFunctionContext[] }>() + private tokensCache = new CacheManager() + private transformCache = new CacheManager<{ version: number, styleFns: PinceauStyleFunctionContext[] }>() public async syncTokens(folders: string[], settings: Partial) { this.synchronizing = this.scanFolders(folders, settings) diff --git a/integrations/language-server/src/utils/findStringRange.ts b/integrations/language-server/src/utils/findStringRange.ts index 713e7b86..ad9703d2 100644 --- a/integrations/language-server/src/utils/findStringRange.ts +++ b/integrations/language-server/src/utils/findStringRange.ts @@ -1,6 +1,6 @@ import type { Position } from 'vscode-languageserver' -export function findStringRange(text: string, target: string, position: Position, delimiter = '$'): { start: number; end: number } { +export function findStringRange(text: string, target: string, position: Position, delimiter = '$'): { start: number, end: number } { const toRet = { start: -1, end: -1, diff --git a/integrations/language-server/src/utils/getCurrentLine.ts b/integrations/language-server/src/utils/getCurrentLine.ts index 620633f4..3cd66329 100644 --- a/integrations/language-server/src/utils/getCurrentLine.ts +++ b/integrations/language-server/src/utils/getCurrentLine.ts @@ -1,6 +1,6 @@ import type { Position, TextDocument } from 'vscode-languageserver-textdocument' -export function getCurrentLine(document: TextDocument, position: Position): { text: string; range: { start: number; end: number } } { +export function getCurrentLine(document: TextDocument, position: Position): { text: string, range: { start: number, end: number } } { const text = document.getText() const lines = text.split('\n') const line = lines[position.line] diff --git a/integrations/language-server/src/utils/getHoveredToken.ts b/integrations/language-server/src/utils/getHoveredToken.ts index 20f423ba..ca10940c 100644 --- a/integrations/language-server/src/utils/getHoveredToken.ts +++ b/integrations/language-server/src/utils/getHoveredToken.ts @@ -20,7 +20,7 @@ function findClosestChar( return -1 } -export function getHoveredToken(doc: TextDocument, position: Position): { token: string; range: { start: number; end: number } } | undefined { +export function getHoveredToken(doc: TextDocument, position: Position): { token: string, range: { start: number, end: number } } | undefined { const line = getCurrentLine(doc, position) if (!line) { return } const startIndex = findClosestChar(line.text, '$', position.character) @@ -35,7 +35,7 @@ export function getHoveredToken(doc: TextDocument, position: Position): { token: } } -export function getHoveredThemeFunction(doc: TextDocument, position: Position): { token: string; range: { start: number; end: number } } | undefined { +export function getHoveredThemeFunction(doc: TextDocument, position: Position): { token: string, range: { start: number, end: number } } | undefined { const line = getCurrentLine(doc, position) if (!line) { return } const startIndex = line.text.lastIndexOf('$theme(', position.character) diff --git a/integrations/nuxt/package.json b/integrations/nuxt/package.json index 99a0a76f..0b5b5ef8 100644 --- a/integrations/nuxt/package.json +++ b/integrations/nuxt/package.json @@ -31,19 +31,19 @@ "stub": "unbuild --stub" }, "dependencies": { - "@nuxt/kit": "^3.8.0", + "@nuxt/kit": "^3.8.1", "@pinceau/integration": "workspace:*", "@pinceau/palette": "workspace:*", "@pinceau/vue": "workspace:*" }, "devDependencies": { - "@nuxt/test-utils": "^3.8.0", - "@nuxthq/studio": "^1.0.2", - "@nuxtjs/color-mode": "^3.3.0", + "@nuxt/test-utils": "^3.8.1", + "@nuxthq/studio": "^1.0.4", + "@nuxtjs/color-mode": "^3.3.2", "@pinceau/configs": "workspace:*", - "nitropack": "2.7.0", + "nitropack": "2.7.2", "nuxi": "3.9.1", - "nuxt": "3.8.0", + "nuxt": "3.8.1", "nuxt-component-meta": "^0.5.4" } } diff --git a/integrations/react/package.json b/integrations/react/package.json index fb9944e0..2567d5a7 100644 --- a/integrations/react/package.json +++ b/integrations/react/package.json @@ -54,7 +54,7 @@ "@pinceau/core": "workspace:*", "@pinceau/integration": "workspace:*", "@pinceau/outputs": "workspace:*", - "acorn": "^8.10.0", + "acorn": "^8.11.2", "jsx-ast-utils": "^3.3.5", "ultrahtml": "npm:@pinceau/ultrahtml@1.5.2" }, diff --git a/integrations/repl/package.json b/integrations/repl/package.json index af5d368a..fb3d9838 100644 --- a/integrations/repl/package.json +++ b/integrations/repl/package.json @@ -42,30 +42,32 @@ "start": "vite preview --port 3000" }, "dependencies": { - "@iconify/json": "^2.2.131", + "@iconify/json": "^2.2.143", + "appwrite": "^13.0.0", "import-mapper": "^0.0.4", "monaco-jsx-syntax-highlight": "^1.2.0", "splitpanes": "^3.1.5", - "unplugin-icons": "^0.17.1", - "vite-plugin-node-polyfills": "^0.15.0" + "unplugin-icons": "^0.17.4", + "vite-plugin-node-polyfills": "^0.16.0", + "vue3-popper": "^1.5.0" }, "devDependencies": { - "@babel/types": "^7.23.0", - "@microsoft/api-extractor": "^7.38.0", + "@babel/types": "^7.23.3", + "@microsoft/api-extractor": "^7.38.3", "@pinceau/browser": "workspace:*", "@pinceau/configs": "workspace:*", "@pinceau/palette": "workspace:*", - "@pinceau/vue": "workspace:*", - "@pinceau/svelte": "workspace:*", "@pinceau/react": "workspace:*", - "@rollup/plugin-replace": "^5.0.4", - "@types/node": "^20.8.7", - "@vitejs/plugin-vue": "^4.4.0", - "@volar/cdn": "~1.10.4", - "@volar/language-server": "^1.10.4", - "@volar/monaco": "~1.10.4", - "@volar/typescript": "~1.10.4", - "@vue/language-service": "1.8.6", + "@pinceau/svelte": "workspace:*", + "@pinceau/vue": "workspace:*", + "@rollup/plugin-replace": "^5.0.5", + "@types/node": "^20.9.2", + "@vitejs/plugin-vue": "^4.5.0", + "@volar/cdn": "~1.11.1", + "@volar/language-server": "^1.11.1", + "@volar/monaco": "~1.11.1", + "@volar/typescript": "~1.11.1", + "@vue/language-service": "1.8.22", "fflate": "^0.8.1", "monaco-editor": "^0.44.0", "monaco-editor-core": "^0.44.0", @@ -76,11 +78,11 @@ "path-browserify": "^1.0.1", "simple-git-hooks": "^2.9.0", "sucrase": "^3.34.0", - "svelte": "^4.2.2", - "svelte2tsx": "^0.6.23", + "svelte": "^4.2.5", + "svelte2tsx": "^0.6.25", "typescript": "^5.2.2", - "vite": "^4.5.0", - "vue": "^3.3.6", - "vue-tsc": "1.8.19" + "vite": "^5.0.0", + "vue": "^3.3.8", + "vue-tsc": "1.8.22" } } diff --git a/integrations/repl/src/compiler/index.ts b/integrations/repl/src/compiler/index.ts index e8b16943..525938d6 100644 --- a/integrations/repl/src/compiler/index.ts +++ b/integrations/repl/src/compiler/index.ts @@ -14,6 +14,8 @@ export function compileModulesForPreview(store: Store, isSSR = false) { const seen = new Set() const processed: string[] = [] + if (!store.state.mainFile) { return [] } + processFile( store, store.state.files[store.state.mainFile], diff --git a/integrations/repl/src/components/Button.vue b/integrations/repl/src/components/Button.vue new file mode 100644 index 00000000..34f9206b --- /dev/null +++ b/integrations/repl/src/components/Button.vue @@ -0,0 +1,14 @@ + + + diff --git a/integrations/repl/src/components/ColoredEllipse.vue b/integrations/repl/src/components/ColoredEllipse.vue new file mode 100644 index 00000000..781e4246 --- /dev/null +++ b/integrations/repl/src/components/ColoredEllipse.vue @@ -0,0 +1,14 @@ + diff --git a/integrations/repl/src/components/ConfigPanel.vue b/integrations/repl/src/components/ConfigPanel.vue new file mode 100644 index 00000000..21193ffd --- /dev/null +++ b/integrations/repl/src/components/ConfigPanel.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/integrations/repl/src/components/Dropdown.vue b/integrations/repl/src/components/Dropdown.vue index 45c5f70d..b21dabc3 100644 --- a/integrations/repl/src/components/Dropdown.vue +++ b/integrations/repl/src/components/Dropdown.vue @@ -48,6 +48,7 @@ styled({ borderRadius: '$radii.xl', appearance: 'none', width: '100px', + fontWeight: '$fontWeight.bold', }, svg: { diff --git a/integrations/repl/src/components/Repl.vue b/integrations/repl/src/components/Repl.vue index 674198f1..8aa7eea4 100644 --- a/integrations/repl/src/components/Repl.vue +++ b/integrations/repl/src/components/Repl.vue @@ -1,28 +1,19 @@ @@ -143,12 +120,31 @@ css({ '--color-branding': '$color.red.5', '--color-branding-dark': '$color.blue.5', '--header-height': '$space.12', + '--tabs-height': '$space.10', 'fontFamily': 'var(--font-base)', 'display': 'flex', 'flexDirection': 'column', 'height': '100%', 'color': '$color.gray.9', + + '--popper-theme-background-color': '$color.gray.1', + '--popper-theme-background-color-hover': '$color.gray.1', + '--popper-theme-text-color': '$color.gray.8', + '--popper-theme-border-width': '1px', + '--popper-theme-border-style': 'solid', + '--popper-theme-border-color': '$color.gray.2', + '--popper-theme-border-radius': '$radii.lg', + '--popper-theme-padding': '$space.2 $space.4', + '--popper-theme-box-shadow': '0 6px 30px -6px rgba(0, 0, 0, 0.25)', + + '$dark': { + '--popper-theme-background-color': '$color.gray.9', + '--popper-theme-background-color-hover': '$color.gray.9', + '--popper-theme-text-color': 'white', + '--popper-theme-border-color': '$color.gray.8', + '--popper-theme-box-shadow': '0 6px 30px -6px rgba(0, 0, 0, 0.25)', + }, }, '$dark': { @@ -164,14 +160,11 @@ css({ }, '.pinceau-repl': { - 'height': '100%', - 'margin': '0', - 'overflow': 'hidden', - 'fontSize': '12px', - 'backgroundColor': 'var(--bg-soft)', - '&.has-topbar': { - height: 'calc(100% - var(--header-height))', - }, + height: 'calc(100% - var(--header-height))', + margin: '0', + overflow: 'hidden', + fontSize: '12px', + backgroundColor: 'var(--bg-soft)', }, ':deep(button)': { @@ -182,8 +175,8 @@ css({ backgroundColor: 'transparent', }, - '.main-pane': { - + '.pane': { + position: 'relative', }, }) @@ -194,27 +187,66 @@ css({ // background: 'linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)' }, + '.popper': { + fontSize: '$fontSize.xs', + whiteSpace: 'nowrap', + }, + '.splitpanes__pane': { boxShadow: '0 0 5px rgba(0, 0, 0, .2) inset', }, '.splitpanes--vertical > .splitpanes__splitter': { - 'minWidth': '6px', - 'backgroundColor': '$color.red.5', - 'opacity': '0.5', - 'transition': 'color 300ms, opacity 300ms', - '&:hover': { - opacity: '1', + 'minWidth': '1px', + 'backgroundColor': 'transparent', + + '&::before': { + top: 'calc(50% - 60px)', + left: '-4px', + width: '8px', + height: '120px', }, }, '.splitpanes--horizontal > .splitpanes__splitter': { - 'minHeight': '6px', - 'backgroundColor': '$color.red.5', - 'opacity': '0.5', + 'position': 'relative', + 'minHeight': '1px', + 'backgroundColor': 'transparent', 'transition': 'color 300ms, opacity 300ms', + + '&::before': { + top: '-4px', + left: 'calc(50% - 60px)', + height: '8px', + width: '120px', + }, + }, + + '.splitpanes__splitter': { + 'opacity': 0, + 'position': 'relative', + '&::before': { + opacity: '0.5', + content: '\'\'', + position: 'absolute', + backgroundColor: '$color.gray.8', + border: '1px solid $color.gray.7', + borderRadius: '2px', + zIndex: '99', + }, + '&::after': { + content: '\'\'', + position: 'absolute', + top: '0', + left: '0', + width: '1px', + height: '100%', + backgroundColor: '$color.gray.8', + }, '&:hover': { - opacity: '1', + '&::before': { + opacity: '1', + }, }, }, }) diff --git a/integrations/repl/src/components/Tabs.vue b/integrations/repl/src/components/Tabs.vue new file mode 100644 index 00000000..5dbc8e02 --- /dev/null +++ b/integrations/repl/src/components/Tabs.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/integrations/repl/src/components/Toggle.vue b/integrations/repl/src/components/Toggle.vue new file mode 100644 index 00000000..f4e51ae8 --- /dev/null +++ b/integrations/repl/src/components/Toggle.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/integrations/repl/src/components/TopBar.vue b/integrations/repl/src/components/TopBar.vue index fa4cc9f8..864f858f 100644 --- a/integrations/repl/src/components/TopBar.vue +++ b/integrations/repl/src/components/TopBar.vue @@ -1,49 +1,8 @@ diff --git a/integrations/repl/src/components/VersionSelect.vue b/integrations/repl/src/components/VersionSelect.vue index 5ceb4a50..47c23fe7 100644 --- a/integrations/repl/src/components/VersionSelect.vue +++ b/integrations/repl/src/components/VersionSelect.vue @@ -7,9 +7,10 @@ const props = defineProps<{ label: string }>() -const versions = ref<{ value: string; title: string }[]>() +const versions = ref<{ value: string, title: string }[]>() const version = defineModel() + async function fetchVersions(): Promise { const res = await fetch(`https://data.jsdelivr.com/v1/package/npm/${props.pkg}`) const { versions } = (await res.json()) as { versions: string[] } diff --git a/integrations/repl/src/components/editor/ConfigToggle.vue b/integrations/repl/src/components/editor/ConfigToggle.vue new file mode 100644 index 00000000..d2373919 --- /dev/null +++ b/integrations/repl/src/components/editor/ConfigToggle.vue @@ -0,0 +1,49 @@ + + + diff --git a/integrations/repl/src/components/editor/EditorContainer.vue b/integrations/repl/src/components/editor/EditorContainer.vue index 943fe8ce..5f8dc8ae 100644 --- a/integrations/repl/src/components/editor/EditorContainer.vue +++ b/integrations/repl/src/components/editor/EditorContainer.vue @@ -3,19 +3,20 @@ import { inject, ref, watch } from 'vue' import Message from '../Message.vue' import { debounce } from '../../utils' import type { Store } from '../../store' -import FileSelector from './FileSelector.vue' -import type { EditorComponentType } from './types' - -const props = defineProps<{ - editorComponent: EditorComponentType -}>() +import MonacoEditor from './MonacoEditor.vue' const SHOW_ERROR_KEY = 'repl_show_error' const store = inject('store') as Store const showMessage = ref(getItem()) -const onChange = debounce((code: string) => (store.state.activeFile.code = code), 100) +const onChange = debounce( + (code: string) => { + if (store.state.activeFile) { store.state.activeFile.code = code } + console.log('setting code!') + }, + 300, +) function setItem() { localStorage.setItem(SHOW_ERROR_KEY, showMessage.value ? 'true' : 'false') @@ -26,17 +27,14 @@ function getItem() { return !(item === 'false') } -watch(showMessage, () => { - setItem() -}) +watch(showMessage, () => setItem()) diff --git a/integrations/repl/src/components/editor/FileSelector.vue b/integrations/repl/src/components/editor/FileSelector.vue index 35357597..33117465 100644 --- a/integrations/repl/src/components/editor/FileSelector.vue +++ b/integrations/repl/src/components/editor/FileSelector.vue @@ -2,7 +2,7 @@ import type { VNode } from 'vue' import { computed, inject, ref } from 'vue' import type { Store } from '../../store' -import { importMapFile, stripSrcPrefix, tsconfigFile } from '../../store' +import { importMapFile, playgroundConfigFile, stripSrcPrefix, themeFile, tsconfigFile } from '../../store' const store = inject('store') as Store @@ -17,12 +17,17 @@ const pending = ref(false) * Text shown in the input box when editing a file's name * This is a display name so it should always strip off the `src/` prefix. */ -const pendingFilename = ref(`Comp.${store.transformer.name}`) +const pendingFilename = ref(`Comp.${store.transformer?.name || 'ts'}`) const files = computed(() => Object.entries(store.state.files) .filter( ([name, file]) => { - return name !== importMapFile && name !== tsconfigFile && !file.hidden + return ( + name !== themeFile + && name !== importMapFile + && name !== tsconfigFile + && !file.hidden + ) }, ) .map(([name]) => name), @@ -110,67 +115,103 @@ function horizontalScroll(e: WheelEvent) { class="file-selector" @wheel="horizontalScroll" > - - +
+ Import Map +
+
diff --git a/integrations/repl/src/components/editor/FrameworkSelect.vue b/integrations/repl/src/components/editor/FrameworkSelect.vue new file mode 100644 index 00000000..b0a04261 --- /dev/null +++ b/integrations/repl/src/components/editor/FrameworkSelect.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/integrations/repl/src/components/editor/FrameworkSelector.vue b/integrations/repl/src/components/editor/FrameworkSelector.vue deleted file mode 100644 index e471f23c..00000000 --- a/integrations/repl/src/components/editor/FrameworkSelector.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - - - diff --git a/integrations/repl/src/components/editor/FrameworkVersionSelect.vue b/integrations/repl/src/components/editor/FrameworkVersionSelect.vue new file mode 100644 index 00000000..d010d2c7 --- /dev/null +++ b/integrations/repl/src/components/editor/FrameworkVersionSelect.vue @@ -0,0 +1,25 @@ + + + diff --git a/integrations/repl/src/components/editor/LayoutToggle.vue b/integrations/repl/src/components/editor/LayoutToggle.vue new file mode 100644 index 00000000..0876865d --- /dev/null +++ b/integrations/repl/src/components/editor/LayoutToggle.vue @@ -0,0 +1,42 @@ + + + diff --git a/integrations/repl/src/components/editor/MonacoEditor.vue b/integrations/repl/src/components/editor/MonacoEditor.vue index 4842b8de..ce0255a9 100644 --- a/integrations/repl/src/components/editor/MonacoEditor.vue +++ b/integrations/repl/src/components/editor/MonacoEditor.vue @@ -15,7 +15,7 @@ function onChange(code: string) {