-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: rewrite HTML tags, modify
svelte exports
- Loading branch information
1 parent
f0f49b3
commit 4627990
Showing
12 changed files
with
95 additions
and
233 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,7 @@ | ||
| export type { Compile, DefaultTheme, Properties, Sheet, Style, StyleDefinition, TeilerComponent, Target } from './constructor' | ||
| export type { HTMLElements } from './tags' | ||
| export type { Compile, DefaultTheme, Properties, Sheet, Style, StyleDefinition, TeilerComponent } from './constructor' | ||
|
|
||
| export { default as tags } from './tags' | ||
| export { default as createStyleSheet } from './sheet' | ||
| export { pattern, sew } from './pattern' | ||
| export { component, global, keyframes, styled } from './constructor' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import type { Compile, HTMLElements, Properties, Style, 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, Props> = TeilerComponent<Target, Props> & ComponentType<SvelteComponent> | ||
|
|
||
| const createComponent = <Target extends HTMLElements, 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<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<unknown, Props> | ||
| } | ||
|
|
||
| type ComponentWithTags = Component<'div'> & { [K in HTMLElements]: Component<K> } | ||
|
|
||
| const construct = <Target extends HTMLElements>(tag: Target, 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 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 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' |
Oops, something went wrong.