feat(packages): update outputs package; expose plugin-types

integrations/nuxt/server/pinceau.server.mjs

@@ -18,6 +18,6 @@ export default async function (nitro) {
     if ($pinceauSSR.options?.ssr?.runtime) { htmlContext.head.splice(2, 0, `<style id="pinceau-runtime">${$pinceauSSR?.css || ''}</style>`) }
 
     // Theme sheet
-    if ($pinceauSSR.options?.ssr?.theme) { htmlContext.head.splice(2, 0, `<style id="pinceau-theme" ${$pinceauSSR.options?.dev ? 'data-vite-dev-id="pinceau.css"' : ''}>${theme || ''}</style>`) }
+    if ($pinceauSSR.options?.ssr?.theme) { htmlContext.head.splice(2, 0, `<style id="pinceau-theme" ${$pinceauSSR.options?.dev ? 'data-vite-dev-id="@pinceau/outputs/theme.css"' : ''}>${theme || ''}</style>`) }
   })
 }

integrations/react/src/unplugin.ts

@@ -4,6 +4,7 @@ import { createUnplugin } from 'unplugin'
 import type { UnpluginInstance } from 'unplugin'
 import { suite } from './transforms/suite'
 import { registerVirtualOutputs } from './utils/virtual'
+import { pluginTypes } from './utils/plugin-types'
 
 export { registerVirtualOutputs }
 
@@ -21,16 +22,7 @@ export const PinceauReactPlugin: UnpluginInstance<undefined> = createUnplugin(()
 
         registerVirtualOutputs(ctx)
 
-        ctx.addTypes({
-          imports: [
-            'import type { ReactStyledComponentFactory } from \'@pinceau/react\'',
-          ],
-          global: [
-            'export const $styled: { [Type in SupportedHTMLElements]: ReactStyledComponentFactory<Type> }',
-          ],
-          raw: [
-          ],
-        })
+        ctx.addTypes(pluginTypes)
       },
     },
 

integrations/react/src/utils.ts

@@ -1,2 +1,3 @@
 export * from './utils/runtime-plugin'
 export * from './utils/virtual'
+export * from './utils/plugin-types'

integrations/react/src/utils/plugin-types.ts

@@ -0,0 +1,10 @@
+export const pluginTypes = {
+  imports: [
+    'import type { ReactStyledComponentFactory } from \'@pinceau/react\'',
+  ],
+  global: [
+    'export const $styled: { [Type in SupportedHTMLElements]: ReactStyledComponentFactory<Type> }',
+  ],
+  raw: [
+  ],
+}

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

@@ -1,20 +1,7 @@
-import { useRuntimeSheet, useThemeSheet } from '@pinceau/runtime'
+const PinceauProvider = window.__modules__['@pinceau/outputs/react-plugin'].PinceauProvider
 
-export const PinceauReactOptions = { dev: false, colorSchemeMode: 'media', computedStyles: true, variants: true, ssr: { theme: true, runtime: true }, appId: false }
+const PinceauReactOptions = window.__modules__['@pinceau/outputs/react-plugin'].PinceauReactOptions
 
-export const PinceauContext = React.createContext()
+const usePinceauContext = window.__modules__['@pinceau/outputs/react-plugin'].usePinceauContext
 
-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 })
-}
+export { PinceauProvider, PinceauReactOptions, usePinceauContext }

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

@@ -1,20 +1,11 @@
-import { useRuntimeSheet, useThemeSheet } from '@pinceau/runtime'
+const getThemeSheet = window.__modules__['@pinceau/outputs/svelte-plugin'].getThemeSheet
 
-export const PinceauSvelteOptions = { dev: false, colorSchemeMode: 'media', computedStyles: true, variants: true, ssr: { theme: true, runtime: true }, appId: false }
+const getRuntimeSheet = window.__modules__['@pinceau/outputs/svelte-plugin'].getRuntimeSheet
 
-let userOptions
+const PinceauSvelteOptions = window.__modules__['@pinceau/outputs/svelte-plugin'].PinceauSvelteOptions
 
-let themeSheet
-export const getRuntimeSheet = () => runtimeSheet
+const pinceauPlugin = window.__modules__['@pinceau/outputs/svelte-plugin'].pinceauPlugin
 
-let runtimeSheet
-export const getThemeSheet = () => themeSheet
+const ssr = window.__modules__['@pinceau/outputs/svelte-plugin'].ssr
 
-export function pinceauPlugin(options) {
-  userOptions = { ...PinceauSvelteOptions, ...options }
-
-  themeSheet = useThemeSheet(userOptions)
-  runtimeSheet = useRuntimeSheet({ themeSheet, ...userOptions })
-}
-
-export const ssr = { toString: () => runtimeSheet.toString() }
+export { getThemeSheet, getRuntimeSheet, PinceauSvelteOptions, pinceauPlugin, ssr }

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

@@ -1,17 +1,5 @@
-import { useRuntimeSheet, useThemeSheet } from '@pinceau/runtime'
+const PinceauVueOptions = window.__modules__['@pinceau/outputs/vue-plugin'].PinceauVueOptions
 
-export const PinceauVueOptions = { dev: false, colorSchemeMode: 'media', computedStyles: true, variants: true, ssr: { theme: true, runtime: true }, appId: false }
+const PinceauVue = window.__modules__['@pinceau/outputs/vue-plugin'].PinceauVue
 
-export const PinceauVue = {
-  install(app, options = {}) {
-    const _options = { ...PinceauVueOptions, ...options }
-
-    const themeSheet = useThemeSheet(_options)
-    app.provide('pinceauThemeSheet', themeSheet)
-
-    const runtimeSheet = useRuntimeSheet({ themeSheet, ..._options })
-    app.provide('pinceauRuntimeSheet', runtimeSheet)
-
-    app.config.globalProperties.$pinceauSSR = { toString: () => runtimeSheet.toString() }
-  },
-}
+export { PinceauVueOptions, PinceauVue }