@teiler/svelte 0.0.30 → 0.1.0

package/rolldown.config.js

@@ -1,121 +0,0 @@
-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/Styled.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-  type _Ignore = $$Generic
-  type Props = $$Generic<object>
-
-  type $$Props = {
-    styleDefinition: StyleDefinition<HTMLElements, Props>
-  }
-
-  import type { DefaultTheme, HTMLElements, Sheet, StyleDefinition } from '@teiler/core'
-  import type { Writable } from 'svelte/store'
-
-  import { insert } from '@teiler/core'
-  import { getStyleSheet } from './sheet'
-  import { getContext } from 'svelte'
-  import { context } from './ThemeProvider.svelte'
-
-  export let styleDefinition: StyleDefinition<HTMLElements, Props>
-
-  const sheet: Sheet = getStyleSheet()
-
-  const theme: Writable<DefaultTheme> = getContext(context)
-
-  $: props = $$restProps as Record<string, unknown> & Props
-
-  $: styleClassName = insert(sheet, styleDefinition, { ...props, theme: $theme })
-
-  $: filtredPropsEntries = Object.entries($$restProps).filter(([key, _value]) => key[0] !== '_' && key !== 'class')
-  $: filtredProps = Object.fromEntries(filtredPropsEntries)
-
-  $: className = $$restProps.class ? `${styleClassName} ${styleDefinition.id} ${$$restProps.class}` : `${styleClassName} ${styleDefinition.id}`
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<svelte:element
-  this={styleDefinition.tag}
-  class={className}
-  {...filtredProps}
-  on:copy
-  on:cut
-  on:paste
-  on:compositionend
-  on:compositionstart
-  on:compositionupdate
-  on:focus
-  on:focusin
-  on:focusout
-  on:blur
-  on:change
-  on:beforeinput
-  on:input
-  on:reset
-  on:submit
-  on:invalid
-  on:formdata
-  on:load
-  on:error
-  on:beforetoggle
-  on:toggle
-  on:keydown
-  on:keypress
-  on:keyup
-  on:abort
-  on:canplay
-  on:canplaythrough
-  on:cuechange
-  on:durationchange
-  on:emptied
-  on:encrypted
-  on:ended
-  on:loadeddata
-  on:loadedmetadata
-  on:loadstart
-  on:pause
-  on:play
-  on:playing
-  on:progress
-  on:ratechange
-  on:seeked
-  on:seeking
-  on:stalled
-  on:suspend
-  on:timeupdate
-  on:volumechange
-  on:waiting
-  on:auxclick
-  on:click
-  on:contextmenu
-  on:dblclick
-  on:drag
-  on:dragend
-  on:dragenter
-  on:dragexit
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseout
-  on:mouseover
-  on:mouseup
-  on:select
-  on:selectionchange
-  on:selectstart
-  on:touchcancel
-  on:touchend
-  on:touchmove
-  on:touchstart
-  on:gotpointercapture
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerout
-  on:pointerover
-  on:pointerup
-  on:lostpointercapture
-  on:gamepadconnected
-  on:gamepaddisconnected
-  on:scroll
-  on:scrollend
-  on:resize
-  on:wheel
-  on:animationstart
-  on:animationend
-  on:animationiteration
-  on:transitionstart
-  on:transitionrun
-  on:transitionend
-  on:transitioncancel
-  on:outrostart
-  on:outroend
-  on:introstart
-  on:introend
-  on:message
-  on:messageerror
-  on:visibilitychange
-  on:cancel
-  on:close
-  on:fullscreenchange
-  on:fullscreenerror><slot /></svelte:element
->

package/src/ThemeProvider.svelte

@@ -1,19 +0,0 @@
-<script context="module">
-  export const context = 'THEME'
-</script>
-
-<script lang="ts">
-  import type { DefaultTheme } from '@teiler/core'
-  import { setContext } from 'svelte'
-  import { writable, type Writable } from 'svelte/store'
-
-  export let theme: DefaultTheme
-
-  const themeStore = writable<DefaultTheme>(theme)
-
-  setContext<Writable<DefaultTheme>>(context, themeStore)
-
-  $: themeStore.set(theme)
-</script>
-
-<slot />

package/src/ThemeProvider.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { SvelteComponent } from 'svelte'
-import type { DefaultTheme } from '@teiler/core'
-
-export const context: string = 'THEME'
-export default class ThemeProvider extends SvelteComponent<{ theme: DefaultTheme }> {}

package/src/ThemeProvider.test.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { DefaultTheme } from '@teiler/core'
-  import ThemeProvider from './ThemeProvider.svelte'
-  import { component } from './component'
-
-  const theme: DefaultTheme = {
-    fontColor: 'green',
-  }
-
-  const TestComponent = component`
-    color: ${({ theme }) => theme.fontColor};
-  `
-</script>
-
-<ThemeProvider {theme}>
-  <TestComponent>abc</TestComponent>
-</ThemeProvider>

package/src/component.ts

@@ -1,57 +0,0 @@
-import type { Compiler, HTMLElements, Properties, StyleDefinition, TeilerComponent } from '@teiler/core'
-import type { ComponentType, SvelteComponent } from 'svelte'
-
-import { component, global, keyframes, styled, tags } from '@teiler/core'
-import Styled from './Styled.svelte'
-
-type SvelteTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & ComponentType<SvelteComponent>
-
-type Options = ConstructorParameters<typeof Styled>[0]
-
-const createComponent = <Target extends HTMLElements, Props extends object = {}>(styleDefinition: StyleDefinition<Target, Props>): SvelteTeilerComponent<Target, Props> => {
-  return class extends Styled<{}, Props> {
-    static styleDefinition = styleDefinition
-
-    constructor(options: Options) {
-      super({
-        ...options,
-        props: {
-          ...options.props,
-          styleDefinition,
-        },
-      })
-    }
-  }
-}
-
-type InferProps<Component, Props> = Component extends SvelteTeilerComponent<HTMLElements, infer P> ? P & Props : 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, 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, Tag>
-}
-
-type Global = {
-  <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<HTMLElements, Props>
-}
-
-type ComponentWithTags = Component<'div', undefined> & { [K in Exclude<HTMLElements, null>]: Component<K> }
-
-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(undefined, component) as ComponentWithTags
-
-tags.forEach((tag) => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  svelteComponent[tag] = construct(tag, component)
-})
-
-const svelteGlobal = construct(null, global) as Global
-
-export { svelteComponent as component, svelteGlobal as global, keyframes, createComponent }

package/src/global.d.ts

@@ -1,3 +0,0 @@
-declare module '*.svelte' {
-  export { SvelteComponentDev as default } from 'svelte/internal'
-}

package/src/index.test.ts

@@ -1,149 +0,0 @@
-import type { StyleDefinition } from '@teiler/core'
-
-import { writable } from 'svelte/store'
-import { describe, expect, test } from '@jest/globals'
-import { render } from '@testing-library/svelte'
-import { createStyleSheet } from '@teiler/core'
-import { component, createComponent, global, keyframes } from './index'
-
-import ThemeProviderTest from './ThemeProvider.test.svelte'
-
-describe('createComponent', () => {
-  test('should create a component', () => {
-    const styleSheet = createStyleSheet({})
-
-    const styleDefinition: StyleDefinition<'div', {}> = {
-      type: 'component',
-      id: 'twq229y',
-      tag: 'div',
-      styles: [[['color: red;'], []]],
-    }
-
-    const component = createComponent(styleDefinition)
-
-    const { baseElement } = render(component, {
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
-    })
-
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-wq229y twq229y"></div></div>')
-    expect(styleSheet.dump()).toBe(' .teiler-wq229y{color:red;}')
-  })
-})
-
-describe('component', () => {
-  test('should create basic a component', () => {
-    const StyledComponent = component`color: blue;`
-
-    const { baseElement } = render(StyledComponent)
-
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1r77qux t8e9dar"></div></div>')
-  })
-
-  test('should create a component with props', () => {
-    const styleSheet = createStyleSheet({})
-
-    const StyledComponent = component<{ _color: string }>`color: ${(props) => props._color};`
-
-    const { baseElement } = render(StyledComponent, {
-      props: { _color: 'yellow' },
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
-    })
-
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-100tn2k t1fqd64x"></div></div>')
-    expect(styleSheet.dump()).toBe(' .teiler-100tn2k{color:yellow;}')
-  })
-
-  test('should create a component with custom theme', () => {
-    const styleSheet = createStyleSheet({})
-
-    const StyledComponent = component`color: ${(props) => props.theme.fontColor};`
-
-    const { baseElement } = render(StyledComponent, {
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet, THEME: writable({ fontColor: 'green' }) })),
-    })
-
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1dc5e1n t1fqd64x"></div></div>')
-    expect(styleSheet.dump()).toBe(' .teiler-1dc5e1n{color:green;}')
-  })
-
-  test('should create a component with custom class', () => {
-    const styleSheet = createStyleSheet({})
-
-    const StyledComponent = component`color: green;`
-
-    const { baseElement } = render(StyledComponent, {
-      props: {
-        class: 'custom-class',
-      },
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
-    })
-
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-1dc5e1n tsqxzcw custom-class"></div></div>')
-    expect(styleSheet.dump()).toBe(' .teiler-1dc5e1n{color:green;}')
-  })
-})
-
-describe('global', () => {
-  test('should create a global style', () => {
-    const styleSheet = createStyleSheet({})
-
-    const GlobalStyle = global`color: red;`
-
-    const { baseElement } = render(GlobalStyle, {
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
-    })
-
-    // expect(GlobalStyle.styleDefinition).toEqual({ id: 'twq229y', styles: [[['color: red;'], []]], tag: null, type: 'global' })
-
-    expect(baseElement.innerHTML).toBe('<div></div>')
-    expect(styleSheet.dump()).toBe(' color:red;')
-  })
-
-  test('should create a global style with theme', () => {
-    const styleSheet = createStyleSheet({})
-
-    const GlobalStyle = global`color: ${(props) => props.theme.fontColor};`
-
-    const { baseElement } = render(GlobalStyle, {
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet, THEME: writable({ fontColor: 'green' }) })),
-    })
-
-    expect(baseElement.innerHTML).toBe('<div></div>')
-    expect(styleSheet.dump()).toBe(' color:green;')
-  })
-})
-
-describe('keyframes', () => {
-  test('should create keyframes', () => {
-    const styleSheet = createStyleSheet({})
-
-    const animation = keyframes`from { opacity: 0; } to { opacity: 1; }`
-    const StyledComponent = component`animation: ${animation} 5s infinite;`
-
-    render(StyledComponent, {
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
-    })
-
-    expect(animation).toEqual({
-      id: 'teiler-g1154k',
-      styles: [[['from { opacity: 0; } to { opacity: 1; }'], []]],
-      type: 'keyframes',
-      tag: null,
-    })
-
-    expect(styleSheet.dump()).toBe(' @keyframes teiler-g1154k{from{opacity:0;}to{opacity:1;}} .teiler-jq8kuu{animation:teiler-g1154k 5s infinite;}')
-  })
-})
-
-describe('ThemeProvider', () => {
-  test('should provide theme', () => {
-    const styleSheet = createStyleSheet({})
-
-    const { baseElement } = render(ThemeProviderTest, {
-      context: new Map(Object.entries({ STYLE_SHEET: styleSheet })),
-    })
-
-    expect(baseElement.innerHTML).toBe('<div><div class="teiler-9hfnro thjt86x">abc</div></div>')
-    expect(styleSheet.dump()).toBe(' .teiler-9hfnro{color:green;}')
-  })
-})

package/src/sheet.ts

@@ -1,20 +0,0 @@
-import { type Sheet, createStyleSheet } from '@teiler/core'
-import { getContext } from 'svelte'
-
-export let styleSheet: Sheet | null = null
-
-export const StyleSheet = 'STYLE_SHEET'
-
-export function getStyleSheet(): Sheet {
-  const fromContext = getContext<Sheet>(StyleSheet)
-
-  if (fromContext) {
-    return fromContext
-  }
-
-  if (styleSheet === null) {
-    styleSheet = createStyleSheet({})
-  }
-
-  return styleSheet
-}

package/svelte.config.js

@@ -1,7 +0,0 @@
-import preprocess from 'svelte-preprocess';
-
-const config = {
-  preprocess: preprocess()
-}
-
-export default config;

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "compilerOptions": {
-    "target": "es6",
-    "lib": [
-      "esnext",
-      "DOM"
-    ],
-    "module": "esNext",
-    "importHelpers": true,
-    "moduleResolution": "bundler",
-    "experimentalDecorators": true,
-    "strict": true,
-    "strictPropertyInitialization": false,
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "verbatimModuleSyntax": false,
-    "skipLibCheck": true,
-    "paths": {
-      "@teiler/core": ["../core/src"]
-    }
-  },
-  "composite": true,
-  "compileOnSave": false,
-}

package/vite.config.mjs

@@ -1,6 +0,0 @@
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-
-export default defineConfig({
-  plugins: [svelte()],
-});