feat(playground): wip playground & browser build; needs a release

integrations/astro/build.config.ts

@@ -19,7 +19,7 @@ export default defineBuildConfig({
       name: 'utils',
     },
   ],
-  failOnWarn: false,
+
   clean: true,
   declaration: true,
   rollup: {

integrations/browser/build.ts

@@ -1,10 +1,10 @@
 import { build } from 'tsup'
-import { env, node, nodeless } from 'unenv'
+import { env, nodeless } from 'unenv'
 
-const { external, alias } = env(nodeless, node)
+const { external, alias } = env(nodeless)
 
 build({
-  minify: true,
+  // minify: true,
   treeshake: true,
   dts: true,
   platform: 'browser',
@@ -28,23 +28,23 @@ build({
     options.external = options.external ?? []
     options.external.push('@vue/*')
     options.external.push('vue')
-    options.external.push('jiti')
+    options.external.push('svelte')
+    options.external.push('svelte/*')
+    options.external.push('@sveltejs/*')
+    options.external.push('react')
+    options.external.push('react-dom')
     options.external.push('@volar/*')
     options.external.push(...external)
     options.external.push('$pinceau/*')
     options.alias = options.alias ?? {}
     options.alias = {
       ...options.alias,
       ...alias,
-      'fs': 'fs',
-      'node:fs': 'fs',
-      'fs/promises': 'fs/promises',
-      'node:fs/promises': 'fs/promises',
       'fast-glob': 'unenv/runtime/mock/noop',
     }
     options.define = {
       'process.env': '0',
-      'process.cwd': '0',
+      'pathToFileURL': '0',
       'process.platform': '0',
     }
     options.splitting = true

integrations/browser/package.json

@@ -81,5 +81,9 @@
     "@pinceau/vue": "workspace:*",
     "jiti": "^1.20.0",
     "tsup": "^7.2.0"
+  },
+  "dependencies": {
+    "esbuild-plugin-pipe": "^0.2.0",
+    "esbuild-plugin-text-replace": "^1.3.0"
   }
 }

integrations/browser/src/core.ts

@@ -1,2 +1,41 @@
-export * from '@pinceau/core/utils'
+export {
+  PINCEAU_SCRIPTS_EXTENSIONS,
+  PINCEAU_SFC_EXTENSIONS,
+  PINCEAU_STYLES_EXTENSIONS,
+  PINCEAU_SUPPORTED_EXTENSIONS,
+  PINCEAU_TEMPLATE_EXTENSIONS,
+  REFERENCES_REGEX,
+  astTypes,
+  debugMarker,
+  errorMessage,
+  evalDeclaration,
+  expressionToAst,
+  fileLink,
+  findCallees,
+  findDefaultExport,
+  get,
+  getCharAfterLastImport,
+  getDefaultOptions,
+  isPathIncluded,
+  isRawTokenLike,
+  isResponsiveTokenObjectLike,
+  merger,
+  normalizeOptions,
+  parsePinceauQuery,
+  parseAst,
+  parseTemplate,
+  pathToVarName,
+  printAst,
+  set,
+  toHash,
+  tokensPaths,
+  transform,
+  usePinceauContext,
+  usePinceauTransformContext,
+  usePinceauVirtualContext,
+  walkTemplate,
+  visitAst,
+  typeToAst,
+  resolveId,
+} from '@pinceau/core/utils'
 export type * from '@pinceau/core'

integrations/browser/src/theme.ts

@@ -1,3 +1,24 @@
-export * from '@pinceau/theme/utils'
+export {
+  cssFormat,
+  declarationFormat,
+  definitionsFormat,
+  generateTheme,
+  helperRegex,
+  hmrFormat,
+  javascriptFormat,
+  isDesignTokenLike,
+  isResponsiveToken,
+  isSafeConstName,
+  isTokenNode,
+  pinceauNameTransformer,
+  pinceauVariableTransformer,
+  transformIndexHtml,
+  utilsTypesFormat,
+  utilsFormat,
+  schemaFormat,
+  typescriptFormat,
+  resolveMediaQueriesKeys,
+  resolveNodePath,
+} from '@pinceau/theme/utils'
 export * from '@pinceau/theme/transforms'
 export type * from '@pinceau/theme'

integrations/language-server/build.config.ts

@@ -5,10 +5,8 @@ export default defineBuildConfig({
     {
       input: 'src/index.ts',
       name: 'index',
-      format: 'esm',
     },
   ],
-  failOnWarn: false,
   clean: true,
   declaration: false,
   rollup: {

integrations/language-server/package.json

@@ -13,7 +13,13 @@
   "license": "MIT",
   "author": "Tahul <yael.guilloux@gmail.com>",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
     "build": "unbuild",
     "clean": "rm -rf dist",

integrations/nuxt/build.config.ts

@@ -7,7 +7,7 @@ export default defineBuildConfig({
       name: 'index',
     },
   ],
-  failOnWarn: false,
+
   clean: true,
   declaration: true,
   rollup: {

integrations/pinceau/build.config.ts

@@ -11,7 +11,7 @@ export default defineBuildConfig({
       name: 'plugin',
     },
   ],
-  failOnWarn: false,
+
   clean: true,
   declaration: true,
   rollup: {

integrations/react/build.config.ts

@@ -22,8 +22,12 @@ export default defineBuildConfig({
       input: 'src/utils.ts',
       name: 'utils',
     },
+    {
+      input: 'src/unplugin.ts',
+      name: 'unplugin',
+    },
   ],
-  failOnWarn: false,
+
   clean: true,
   declaration: true,
   rollup: {

integrations/react/package.json

@@ -35,6 +35,11 @@
       "types": "./dist/utils.d.ts",
       "import": "./dist/utils.mjs",
       "require": "./dist/utils.cjs"
+    },
+    "./unplugin": {
+      "types": "./dist/unplugin.d.ts",
+      "import": "./dist/unplugin.mjs",
+      "require": "./dist/unplugin.cjs"
     }
   },
   "main": "./dist/index.cjs",

integrations/react/src/plugin.ts

@@ -1,6 +1,6 @@
 import { createPinceauIntegration } from '@pinceau/integration'
 import type { PinceauIntegration } from '@pinceau/integration'
-import { PinceauReactPlugin } from './utils/unplugin'
+import { PinceauReactPlugin } from './unplugin'
 
 const pinceauPlugin: PinceauIntegration = createPinceauIntegration(
   [

integrations/react/src/types/index.ts

@@ -9,7 +9,7 @@ export type PinceauStyledComponent<
   Attrs extends {} = {},
 > = React.FunctionComponent<React.ComponentProps<Type> & React.PropsWithChildren<Props> & Attrs>
 
-export interface StyledComponentFactory<
+export interface VueStyledComponentFactory<
   Type extends SupportedHTMLElements,
   OuterProps extends {} = {},
   OuterAttrs extends {} = {},

integrations/react/src/utils/unplugin.ts → integrations/react/src/unplugin.ts

@@ -2,8 +2,10 @@ import { getPinceauContext, transform, transformInclude } from '@pinceau/core/ut
 import type { PinceauContext } from '@pinceau/core'
 import { createUnplugin } from 'unplugin'
 import type { UnpluginInstance } from 'unplugin'
-import { suite } from '../transforms/suite'
-import { registerVirtualOutputs } from './virtual'
+import { suite } from './transforms/suite'
+import { registerVirtualOutputs } from './utils/virtual'
+
+export { registerVirtualOutputs }
 
 export const PinceauReactPlugin: UnpluginInstance<undefined> = createUnplugin(() => {
   let ctx: PinceauContext
@@ -21,7 +23,7 @@ export const PinceauReactPlugin: UnpluginInstance<undefined> = createUnplugin(()
 
         ctx.addTypes({
           imports: [
-            'import type { StyledComponentFactory as ReactStyledComponentFactory } from \'@pinceau/react\'',
+            'import type { ReactStyledComponentFactory } from \'@pinceau/react\'',
           ],
           global: [
             'export const $styled: { [Type in SupportedHTMLElements]: ReactStyledComponentFactory<Type> }',

integrations/react/src/utils.ts

@@ -1,4 +1,2 @@
-export * from './utils/runtime-exports'
 export * from './utils/runtime-plugin'
-export * from './utils/unplugin'
 export * from './utils/virtual'

integrations/react/src/utils/virtual.ts

@@ -1,22 +1,21 @@
+import fs from 'node:fs'
 import { join } from 'pathe'
 import type { PinceauContext } from '@pinceau/core'
+import { writeOutput } from '@pinceau/core/utils'
 import { createReactPlugin } from './runtime-plugin'
-import { createRuntimeExports } from './runtime-exports'
 
 /**
  * These target needs to be written.
  */
 export function registerVirtualOutputs(ctx: PinceauContext) {
   const outputs: [string, string, string][] = [
-    ['$pinceau', '/__pinceau_runtime.js', createRuntimeExports()],
     ['$pinceau/react-plugin', '/__pinceau_react_plugin.js', createReactPlugin(ctx)],
   ]
 
   outputs.forEach(([importPath, virtualPath, content]) => ctx.registerOutput(importPath, virtualPath, content))
 
   // Write plugin & runtime exports outputs
   if (ctx.options.theme.buildDir) {
-    ctx.writeOutput('$pinceau', join(ctx.options.theme.buildDir, 'runtime.js'))
-    ctx.writeOutput('$pinceau/react-plugin', join(ctx.options.theme.buildDir, 'react-plugin.js'))
+    writeOutput('$pinceau/react-plugin', join(ctx.options.theme.buildDir, 'react-plugin.js'), ctx.outputs, fs)
   }
 }

integrations/repl/package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@iconify/json": "^2.2.128",
+    "import-mapper": "^0.0.4",
     "monaco-jsx-syntax-highlight": "^1.2.0",
     "splitpanes": "^3.1.5",
     "unplugin-icons": "^0.17.0",
@@ -51,9 +52,12 @@
   "devDependencies": {
     "@babel/types": "^7.23.0",
     "@microsoft/api-extractor": "^7.38.0",
+    "@pinceau/browser": "workspace:*",
     "@pinceau/configs": "workspace:*",
     "@pinceau/palette": "workspace:*",
     "@pinceau/vue": "workspace:*",
+    "@pinceau/svelte": "workspace:*",
+    "@pinceau/react": "workspace:*",
     "@rollup/plugin-replace": "^5.0.3",
     "@types/node": "^20.8.5",
     "@vitejs/plugin-vue": "^4.4.0",

integrations/repl/public/react-plugin-proxy.js

@@ -0,0 +1,20 @@
+import { useRuntimeSheet, useThemeSheet } from '@pinceau/runtime'
+
+export const PinceauReactOptions = { dev: false, colorSchemeMode: 'media', computedStyles: true, variants: true, ssr: { theme: true, runtime: true }, appId: false }
+
+export const PinceauContext = React.createContext()
+
+export const usePinceauContext = () => React.useContext(PinceauContext)
+
+export function PinceauProvider({ options, children, cb }) {
+  const userOptions = { ...PinceauReactOptions, ...options }
+
+  const themeSheet = useThemeSheet(userOptions)
+  const runtimeSheet = useRuntimeSheet({ themeSheet, ...userOptions })
+
+  const ssr = { toString: () => runtimeSheet.toString() }
+
+  if (cb) { cb(ssr) }
+
+  return React.createElement(PinceauContext.Provider, { value: { themeSheet, runtimeSheet, ssr }, children })
+}