@teiler/svelte 0.0.6 → 0.0.8

package/src/component.ts

@@ -0,0 +1,55 @@
+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>
+
+const createComponent = <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>): SvelteTeilerComponent<Target, Props> => {
+  return class extends Styled {
+    static styleDefinition = styleDefinition
+
+    constructor(options) {
+      super({
+        ...options,
+        props: {
+          ...options.props,
+          styleDefinition,
+        },
+      })
+    }
+  }
+}
+
+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 Component<Target extends HTMLElements> = {
+  <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>
+}
+
+type Global = {
+  <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<HTMLElements, Props>
+}
+
+type ComponentWithTags = Component<'div'> & { [K in HTMLElements]: Component<K> }
+
+const construct = (tag: HTMLElements, 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 baseComponent = construct('div', component)
+
+tags.forEach((tag) => {
+  baseComponent[tag] = construct(tag, component)
+})
+
+const svelteComponent = baseComponent as ComponentWithTags
+
+const svelteGlobal = construct(null, global) as Global
+
+export { svelteComponent as component, svelteGlobal as global, keyframes, createComponent }

package/src/index.ts

@@ -1,59 +1,2 @@
-import type { Compile, Properties, Style, Target, TeilerComponent } from '@teiler/core'
-import type { ComponentType, SvelteComponent } from 'svelte'
-
-import { component, global, keyframes, styled } from '@teiler/core'
-import Styled from './Styled.svelte'
-import tags from './tags'
-
-type SvelteTeilerComponent<Target, Props> = TeilerComponent<Target, Props> & ComponentType<SvelteComponent>
-
-const createComponent = <Target, Props>(compile: Compile, tag: Target, styles: Array<Style<Props>>): SvelteTeilerComponent<Target, Props> => {
-  return class extends Styled {
-    static styles = styles
-    static tag = tag
-
-    constructor(options) {
-      super({
-        ...options,
-        props: {
-          ...options.props,
-          compile,
-          tag,
-          styles,
-        },
-      })
-    }
-  }
-}
-
-type InferProps<Component, Props> = Component extends SvelteTeilerComponent<Target, infer P> ? P & Props : Props
-type InferComponent<Component, Props> = Component extends SvelteTeilerComponent<infer E, infer P> ? SvelteTeilerComponent<E, Props & P> : SvelteTeilerComponent<Target, Props>
-
-type Component<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>
-}
-
-type Global = {
-  <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<unknown, Props>
-}
-
-type ComponentWithTags = Component<'div'> & { [K in (typeof tags)[number]]: Component<K> }
-
-const construct = (tag: string, compile: Compile) => {
-  return <Props extends object = {}>(stringOrBinded: TeilerComponent<Target, Props> | TemplateStringsArray, ...properties: Properties<Props>[]) => {
-    const binded = createComponent.bind(null, compile, (stringOrBinded as TeilerComponent<Target, Props>).tag || tag)
-    return styled<Props, SvelteTeilerComponent<Target, Props>>(binded, stringOrBinded, ...properties)
-  }
-}
-
-const svelteComponent = construct('div', component)
-
-tags.forEach((tag) => {
-  svelteComponent[tag] = construct(tag, component)
-})
-
-const svelteGlobal = construct(null, global) as Global
-
-export { svelteGlobal as global, keyframes, createComponent }
-export default svelteComponent as ComponentWithTags
+export { component, global, keyframes, createComponent } from './component'
+export { default as ThemeProvider } from './ThemeProvider.svelte'

package/src/sheet.ts

@@ -1,10 +1,10 @@
-import { type Sheet, createStyleSheet } from "@teiler/core";
-import { getContext } from "svelte";
+import { type Sheet, createStyleSheet } from '@teiler/core'
+import { getContext } from 'svelte'
 
 export const styleSheet = createStyleSheet({})
 
 export const StyleSheet = 'STYLE_SHEET'
 
 export function getStyleSheet(): Sheet {
-  return getContext(StyleSheet) || styleSheet;
+  return getContext(StyleSheet) || styleSheet
 }

package/src/tags.ts

@@ -1,140 +0,0 @@
-const tags = [
-  'a',
-  'abbr',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'head',
-  'header',
-  'hgroup',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'keygen',
-  'label',
-  'legend',
-  'li',
-  'link',
-  'main',
-  'map',
-  'mark',
-  'marquee',
-  'menu',
-  'menuitem',
-  'meta',
-  'meter',
-  'nav',
-  'noscript',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'script',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'style',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'title',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr',
-
-  // SVG
-  'circle',
-  'clipPath',
-  'defs',
-  'ellipse',
-  'foreignObject',
-  'g',
-  'image',
-  'line',
-  'linearGradient',
-  'mask',
-  'path',
-  'pattern',
-  'polygon',
-  'polyline',
-  'radialGradient',
-  'rect',
-  'stop',
-  'svg',
-  'text',
-  'tspan'
-] as const
-
-export default tags