@teiler/svelte 0.0.29 → 0.0.30

package/rolldown.config.js

@@ -0,0 +1,121 @@
+import { readFileSync } from 'fs'
+import path from 'path'
+import { compile, preprocess } from 'svelte/compiler'
+import sveltePreprocess from 'svelte-preprocess'
+import { dts } from 'rolldown-plugin-dts'
+import { transformSync } from '@swc/core'
+
+const globals = {
+  'svelte/internal': 'svelte/internal',
+  'svelte/internal/disclose-version': 'svelte/internal/disclose-version',
+  'svelte/store': 'svelte/store',
+  svelte: 'svelte',
+}
+
+function sveltePlugin() {
+  return {
+    name: 'svelte-rolldown',
+
+    resolveId(source, importer) {
+      if (source.endsWith('.svelte')) {
+        if (!importer) return path.resolve(source)
+        return path.resolve(path.dirname(importer), source)
+      }
+      return null
+    },
+
+    async transform(code, id) {
+      if (!id.endsWith('.svelte')) return null
+
+      const source = readFileSync(id, 'utf-8')
+
+      const preprocessed = await preprocess(
+        source,
+        sveltePreprocess({
+          typescript({ content, filename }) {
+            const { code, map } = transformSync(content, {
+              filename: `${filename}.ts`,
+              sourceMaps: true,
+            })
+            return { code, map }
+          },
+        }),
+        { filename: id },
+      )
+
+      const { js } = compile(preprocessed.code, {
+        filename: id,
+        sourcemap: false,
+      })
+
+      return {
+        code: js.code,
+        moduleType: 'js',
+      }
+    },
+  }
+}
+
+export default [
+  {
+    input: 'src/index.ts',
+    external: ['svelte', 'svelte/internal', /^svelte\//],
+    resolve: {
+      alias: {
+        '@teiler/core': path.resolve('../core/src/index.ts'),
+      },
+    },
+    output: [
+      {
+        file: 'dist/teiler-svelte.umd.js',
+        name: 'teiler-svelte',
+        format: 'umd',
+        sourcemap: true,
+        minify: true,
+        globals,
+      },
+      {
+        file: 'dist/teiler-svelte.cjs.js',
+        format: 'cjs',
+        sourcemap: true,
+        minify: true,
+        globals,
+      },
+      {
+        file: 'dist/teiler-svelte.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        minify: true,
+        globals,
+      },
+    ],
+    plugins: [sveltePlugin()],
+    watch: {
+      clearScreen: false,
+    },
+  },
+  {
+    input: 'src/index.ts',
+    external: ['svelte', 'svelte/internal', /^svelte\//, '@teiler/core'],
+    output: {
+      dir: 'dist',
+      format: 'es',
+      entryFileNames: (chunk) => (chunk.name.endsWith('.d') ? 'teiler-svelte.d.ts' : '_entry.js'),
+    },
+    plugins: [
+      {
+        name: 'svelte-dts-redirect',
+        resolveId(id, importer) {
+          if (id.endsWith('.svelte') && importer) {
+            return { id: path.resolve(path.dirname(importer), id + '.d.ts') }
+          }
+          return null
+        },
+      },
+      dts({ emitDtsOnly: true }),
+    ],
+    watch: {
+      clearScreen: false,
+    },
+  },
+]

package/src/component.ts

@@ -25,26 +25,26 @@ const createComponent = <Target extends HTMLElements, Props extends object = {}>
 }
 
 type InferProps<Component, Props> = Component extends SvelteTeilerComponent<HTMLElements, infer P> ? P & Props : Props
-type InferComponent<Component, Props> = Component extends SvelteTeilerComponent<infer E, infer P> ? SvelteTeilerComponent<E, Props & P> : SvelteTeilerComponent<HTMLElements, Props>
+type InferComponent<Component, Props, Tag> = Component extends SvelteTeilerComponent<infer E, infer P> ? SvelteTeilerComponent<Tag extends HTMLElements ? Tag : E, Props & P> : SvelteTeilerComponent<HTMLElements, Props>
 
-type Component<Target extends HTMLElements> = {
+type Component<Target extends HTMLElements, Tag extends HTMLElements | undefined = Target> = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<Target, Props>
-  <Component>(binded: Component): <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<InferProps<Component, Props>>[]) => InferComponent<Component, Props>
+  <Component>(binded: Component): <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<InferProps<Component, Props>>[]) => InferComponent<Component, Props, Tag>
 }
 
 type Global = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<HTMLElements, Props>
 }
 
-type ComponentWithTags = Component<'div'> & { [K in Exclude<HTMLElements, null>]: Component<K> }
+type ComponentWithTags = Component<'div', undefined> & { [K in Exclude<HTMLElements, null>]: Component<K> }
 
-const construct = (tag: HTMLElements, compiler: Compiler) => {
+const construct = (tag: HTMLElements | undefined, compiler: Compiler) => {
   return <Props extends object = {}>(stringOrBinded: TeilerComponent<HTMLElements, Props> | TemplateStringsArray, ...properties: Properties<Props>[]) => {
     return styled<Props, SvelteTeilerComponent<HTMLElements, Props>>(tag, compiler, createComponent, stringOrBinded, ...properties)
   }
 }
 
-const svelteComponent = construct('div', component) as ComponentWithTags
+const svelteComponent = construct(undefined, component) as ComponentWithTags
 
 tags.forEach((tag) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/src/index.test.ts

@@ -36,7 +36,7 @@ describe('component', () => {
 
     const { baseElement } = render(StyledComponent)
 
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1r77qux t1r77qux"></div></div>')
+    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1r77qux t8e9dar"></div></div>')
   })
 
   test('should create a component with props', () => {
@@ -49,7 +49,7 @@ describe('component', () => {
       context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
     })
 
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-100tn2k t10upe3l"></div></div>')
+    expect(baseElement.innerHTML).toBe('<div><div class="teiler-100tn2k t1fqd64x"></div></div>')
     expect(styleSheet.dump()).toBe(' .teiler-100tn2k{color:yellow;}')
   })
 
@@ -62,7 +62,7 @@ describe('component', () => {
       context: new Map(Object.entries({ STYLE_SHEET: styleSheet, THEME: writable({ fontColor: 'green' }) })),
     })
 
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1dc5e1n t10upe3l"></div></div>')
+    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1dc5e1n t1fqd64x"></div></div>')
     expect(styleSheet.dump()).toBe(' .teiler-1dc5e1n{color:green;}')
   })
 
@@ -78,7 +78,7 @@ describe('component', () => {
       context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
     })
 
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1dc5e1n t1dc5e1n custom-class"></div></div>')
+    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1dc5e1n tsqxzcw custom-class"></div></div>')
     expect(styleSheet.dump()).toBe(' .teiler-1dc5e1n{color:green;}')
   })
 })
@@ -143,7 +143,7 @@ describe('ThemeProvider', () => {
       context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
     })
 
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-9hfnro ta5e6s7">abc</div></div>')
+    expect(baseElement.innerHTML).toBe('<div><div class="teiler-9hfnro thjt86x">abc</div></div>')
     expect(styleSheet.dump()).toBe(' .teiler-9hfnro{color:green;}')
   })
 })

package/tsconfig.json

@@ -13,7 +13,7 @@
     ],
     "module": "esNext",
     "importHelpers": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "strict": true,
     "strictPropertyInitialization": false,