Change strict to true in tsconfig.json (#13)

* Change `strict` to `true` in `tsconfig.json` * Fix storybook test * Change `strict` to `true` in `tsconfig.json` * Change `strict` to `true` in `tsconfig.json`
nerdslabs · Oct 16, 2024 · f492af9 · f492af9
1 parent 9aadd6a
commit f492af9
Show file tree

Hide file tree

Showing 25 changed files with 134 additions and 73 deletions.
diff --git a/.changeset/modern-months-attack.md b/.changeset/modern-months-attack.md
@@ -0,0 +1,6 @@
+---
+"@teiler/svelte": patch
+"@teiler/vue": patch
+---
+
+Change `strict` to `true` in `tsconfig.json`
diff --git a/.changeset/slimy-taxis-rhyme.md b/.changeset/slimy-taxis-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@teiler/core": patch
+---
+
+Change `strict` to `true` in `tsconfig.json`
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -47,7 +47,7 @@ jobs:
       - name: Install Dependencies
         run: |
           yarn install
-          yarn dlx playwright install --with-deps chromium
+          yarn playwright install --with-deps chromium
       - name: Build
         run: yarn build
       - name: Run tests

diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
     "eslint": "^9.9.0",
+    "playwright": "^1.48.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "storybook": "^8.1.1",

diff --git a/packages/core/src/constructor.test.ts b/packages/core/src/constructor.test.ts
@@ -206,7 +206,7 @@ describe('insert', () => {
       hydrate: jest.fn<(ids: string[]) => void>(),
     }
 
-    const definition: StyleDefinition<'div', {}> = {
+    const definition: StyleDefinition<null, {}> = {
       id: 'teiler-1ep7axc',
       styles: [[['from { background-color: red; } to { background-color: green; }'], []]],
       tag: null,
@@ -229,7 +229,7 @@ describe('insert', () => {
       hydrate: jest.fn<(ids: string[]) => void>(),
     }
 
-    const definition: StyleDefinition<'div', {}> = {
+    const definition: StyleDefinition<null, {}> = {
       id: 'tytz3vv',
       styles: [[['body { color: red; }'], []]],
       tag: null,

diff --git a/packages/core/src/constructor.ts b/packages/core/src/constructor.ts
@@ -5,23 +5,23 @@ import type { Pattern } from './pattern'
 import hash from './hash'
 import { compile, transpile } from './css'
 
-type DefaultTheme = { [key: string]: string | boolean }
+type DefaultTheme = {}
 
 type Arguments<Props> = {
   theme: DefaultTheme
 } & Props
 
-type CSS = { styles: Style<unknown>[]; id: string; __css__: true }
-type Expression<Props> = (props: Arguments<Props>) => string | boolean | CSS
+type CSS<Props> = { styles: Style<Props>[]; id: string; __css__: true }
+type Expression<Props> = (props: Arguments<Props>) => string | boolean | CSS<Props>
 type Raw = string | number
 type Properties<Props> = Expression<Props> | StyleDefinition<HTMLElements, Props> | Pattern<HTMLElements, Props> | TeilerComponent<HTMLElements, Props> | Raw
 type Style<Props> = [string[], Properties<Props>[]]
 
-type StyleDefinition<Target extends HTMLElements | null, Props> = {
+type StyleDefinition<Target extends HTMLElements, Props> = {
   type: 'component' | 'global' | 'keyframes'
   id: string
   styles: Array<Style<Props>>
-  tag: Target | null
+  tag: Target
 }
 
 type TeilerComponent<Target extends HTMLElements, Props> = {
@@ -37,23 +37,23 @@ function styled<Props, Type extends TeilerComponent<HTMLElements, Props>>(
   createComponent: CreateCallback<Type, Props>,
   stringOrBinded: TeilerComponent<HTMLElements, Props> | ReadonlyArray<string>,
   ...properties: Properties<Props>[]
-): ExtendCallback<Type, Props> | Type {
+): Type | ExtendCallback<Type, Props> {
   if (Array.isArray(stringOrBinded)) {
     const strings = stringOrBinded as ReadonlyArray<string>
     const style: Style<Props> = [Array.from(strings), properties]
     const styleDefinition = compiler(tag, [style])
     return createComponent(styleDefinition)
   } else {
     const binded = stringOrBinded as TeilerComponent<HTMLElements, Props>
-    return (strings: ReadonlyArray<string>, ...properties: Expression<Props>[]) => {
+    return (strings: ReadonlyArray<string>, ...properties: Properties<Props>[]) => {
       const style: Style<Props> = [Array.from(strings), properties]
       const styleDefinition = compiler(binded.styleDefinition.tag, [...binded.styleDefinition.styles, style])
       return createComponent(styleDefinition)
     }
   }
 }
 
-type Compiler = <Target extends HTMLElements | null, Props>(tag: Target, styles: Array<Style<Props>>) => StyleDefinition<Target, Props>
+type Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>) => StyleDefinition<Target, Props>
 
 const component: Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
@@ -66,7 +66,7 @@ const component: Compiler = <Target extends HTMLElements, Props>(tag: Target, st
   }
 }
 
-const global: Compiler = <Target extends HTMLElements, Props>(tag: null, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
+const global: Compiler = <Target extends HTMLElements, Props>(tag: Target, styles: Array<Style<Props>>): StyleDefinition<Target, Props> => {
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
 
   return {
@@ -89,14 +89,14 @@ function keyframes(strings: ReadonlyArray<string>, ...properties: Raw[]): StyleD
   }
 }
 
-function css<Props>(strings: ReadonlyArray<string>, ...properties: Exclude<Properties<Props>, Expression<Props>>[]): CSS {
+function css<Props>(strings: ReadonlyArray<string>, ...properties: Exclude<Properties<Props>, Expression<Props>>[]): CSS<Props> {
   const style: Style<Props> = [Array.from(strings), properties]
   const styles = [style]
   const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
   return { styles: styles, id: 't' + hash(id), __css__: true }
 }
 
-function insert(sheet: Sheet, definition: StyleDefinition<HTMLElements, unknown>, props: Arguments<unknown>): string | null {
+function insert<Props = {}>(sheet: Sheet, definition: StyleDefinition<HTMLElements, Props>, props: Arguments<Props>): string | null {
   const { styles, type } = definition
   const { css, definitions } = compile(styles, props)
   const compiledId = hash(css)
@@ -120,5 +120,5 @@ function insert(sheet: Sheet, definition: StyleDefinition<HTMLElements, unknown>
   return null
 }
 
-export type { Arguments, Compiler, CreateCallback, CSS, DefaultTheme, Properties, Sheet, Style, StyleDefinition, TeilerComponent, HTMLElements }
+export type { Arguments, Compiler, CreateCallback, CSS, DefaultTheme, Properties, Raw, Sheet, Style, StyleDefinition, TeilerComponent, HTMLElements }
 export { component, css, global, insert, keyframes, styled }
diff --git a/packages/core/src/css.test.ts b/packages/core/src/css.test.ts
@@ -127,7 +127,7 @@ describe('compile', () => {
   })
 
   test('with css', () => {
-    const css: CSS = {
+    const css: CSS<{}> = {
       id: 't1vxhd59',
       styles: [[['background: ', ';'], ['red']]],
       __css__: true,

diff --git a/packages/core/src/css.ts b/packages/core/src/css.ts
@@ -1,4 +1,4 @@
-import type { Arguments, HTMLElements } from './constructor'
+import type { Arguments, HTMLElements, Raw } from './constructor'
 import type { Pattern, Style, StyleDefinition } from '.'
 
 import { middleware, prefixer, rulesheet, serialize, stringify, compile as stylisCompile } from 'stylis'
@@ -11,10 +11,10 @@ type CompileResult<Props> = {
 }
 
 function compile<Props>(styles: Array<Style<Props>>, props: Arguments<Props>): CompileResult<Props> {
-  return styles.reduce(
+  return styles.reduce<CompileResult<Props>>(
     (result, [strings, properties]) => {
       const compiled = strings
-        .reduce((acc, strings, index) => {
+        .reduce<(string | true | Raw)[]>((acc, strings, index) => {
           acc = [...acc, strings]
 
           const property = properties.at(index)
@@ -67,7 +67,7 @@ function compile<Props>(styles: Array<Style<Props>>, props: Arguments<Props>): C
 }
 
 function transpile(css: string): string {
-  const results = []
+  const results: string[] = []
 
   serialize(
     stylisCompile(css),

diff --git a/packages/core/src/pattern.test.ts b/packages/core/src/pattern.test.ts
@@ -57,13 +57,13 @@ describe('pattern', () => {
   })
 })
 
-type TestComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & {
+type TestComponent<Target extends HTMLElements> = TeilerComponent<Target, {}> & {
   render(): string
 }
 
 const sheet = createStyleSheet({})
 
-const createComponent = <Target extends HTMLElements, Props>(styles: StyleDefinition<Target, Props>): TestComponent<Target, Props> => {
+const createComponent = <Target extends HTMLElements>(styles: StyleDefinition<Target, {}>): TestComponent<Target> => {
   return {
     styleDefinition: styles,
     render() {

diff --git a/packages/core/src/pattern.ts b/packages/core/src/pattern.ts
@@ -6,29 +6,29 @@ import hash from './hash'
 
 type PropertiesWithPattern<Props> = Properties<Props> | Pattern<HTMLElements, Props>
 
-type Pattern<Target extends HTMLElements | null, Props> = {
+type Pattern<Target extends HTMLElements, Props = {}> = {
   styles: Style<Props>[]
   tag: Target
   id: string
   __pattern__: true
 }
 
-type ExtendCallback<Target extends HTMLElements | null, Props> = <Component>(string: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => Pattern<Target, Infer<Component, Props>>
+type ExtendCallback<Target extends HTMLElements, Props> = <Component>(string: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => Pattern<Target, Infer<Component, Props>>
 
-type Constructor<Target extends HTMLElements | null> = {
-  <Props>(pattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
-  <Props>(string: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
+type Constructor<Target extends HTMLElements> = {
+  <Props = {}>(pattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
+  <Props = {}>(string: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
 }
 
-type ConstructorWithTags = Constructor<'div'> & { [K in HTMLElements]: Constructor<K> } & { global: Constructor<null> }
-
 type Infer<Component, Props> = Component extends Pattern<HTMLElements, infer P> ? P & Props : Props
 
-const construct = (tag: HTMLElements) => {
-  return <Props>(stringOrPattern: Pattern<HTMLElements, Props> | ReadonlyArray<string>, ...properties: Properties<Props>[]): Pattern<HTMLElements, Props> | ExtendCallback<HTMLElements, Props> => {
+const construct = <Target extends HTMLElements>(tag: Target) => {
+  function create<Props = {}>(stringOrPattern: Pattern<Target, Props>): ExtendCallback<Target, Props>
+  function create<Props = {}>(stringOrPattern: ReadonlyArray<string>, ...properties: PropertiesWithPattern<Props>[]): Pattern<Target, Props>
+  function create<Props>(stringOrPattern: Pattern<Target, Props> | ReadonlyArray<string>, ...properties: Properties<Props>[]): Pattern<Target, Props> | ExtendCallback<Target, Props> {
     if ('__pattern__' in stringOrPattern) {
       return <Component>(strings: ReadonlyArray<string>, ...properties: Properties<Infer<Component, Props>>[]) => {
-        const style: Style<Props> = [Array.from(strings), properties]
+        const style: Style<Infer<Component, Props>> = [Array.from(strings), properties]
         const styles = [...stringOrPattern.styles, style]
         const id = styles.reduce((acc, [strings]) => acc + strings.join(''), '')
         return { styles: styles, id: 't' + hash(id), tag: stringOrPattern.tag, __pattern__: true }
@@ -41,18 +41,23 @@ const construct = (tag: HTMLElements) => {
       return { styles: styles, id: 't' + hash(id), tag, __pattern__: true }
     }
   }
+
+  return create
 }
 
-const pattern = construct('div')
+type HTMLElementsWithoutNull = Exclude<HTMLElements, null>
+type ConstructorWithTags = Constructor<'div'> & { [K in HTMLElementsWithoutNull]: Constructor<K> } & { global: Constructor<null> }
+
+const pattern = construct('div') as ConstructorWithTags
 
 tags.forEach((tag) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   pattern[tag] = construct(tag)
 })
 
 pattern['global'] = construct(null)
 
-const binded = pattern as ConstructorWithTags
-
 type CreateCallback<Target extends HTMLElements, Type extends TeilerComponent<Target, Props>, Props> = (styles: StyleDefinition<Target, Props>) => Type
 
 function sew<Target extends HTMLElements, Props, Type extends TeilerComponent<Target, Props>>(pattern: Pattern<Target, Props>, createComponent: CreateCallback<Target, Type, Props>): Type {
@@ -64,5 +69,5 @@ function sew<Target extends HTMLElements, Props, Type extends TeilerComponent<Ta
   })
 }
 
-export { binded as pattern, sew }
+export { pattern, sew }
 export type { Pattern }
diff --git a/packages/core/src/sheet/index.test.ts b/packages/core/src/sheet/index.test.ts
@@ -17,7 +17,7 @@ describe('createStyleSheet CSR', () => {
 })
 
 describe('createStyleSheet SSR', () => {
-  beforeAll(() => (global.document = undefined))
+  beforeAll(() => (global.document = undefined!))
 
   test('should create a new StyleSheet object', () => {
     const sheet = createStyleSheet({})

diff --git a/packages/core/src/sheet/tag.ts b/packages/core/src/sheet/tag.ts
@@ -1,7 +1,7 @@
 type Tag = {
   insertRule(key: string, rule: string): number
   deleteRule(key: string): void
-  getRule(key: string): string
+  getRule(key: string): string | null
   getAllRules(): string
   getAllKeys(): string[]
   [k: string]: unknown
@@ -55,7 +55,7 @@ export function createBrowserTag(container?: HTMLElement): Tag {
       return inserted.size
     },
     deleteRule: function (key: string): void {
-      rules.removeChild(inserted.get(key))
+      rules.removeChild(inserted.get(key)!)
       inserted.delete(key)
     },
     getRule: function (key: string): string | null {

diff --git a/packages/core/src/tags.ts b/packages/core/src/tags.ts
@@ -131,5 +131,5 @@ const elements = [
   'text',
 ] as const
 
-export default new Set(elements)
-export type HTMLElements = (typeof elements)[number]
+export default elements
+export type HTMLElements = (typeof elements)[number] | null
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
@@ -8,7 +8,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "strict": false,
+    "strict": true,
     "strictPropertyInitialization": false,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,

diff --git a/packages/svelte/src/Styled.svelte b/packages/svelte/src/Styled.svelte
@@ -1,4 +1,11 @@
 <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'
 
@@ -7,13 +14,15 @@
   import { getContext } from 'svelte'
   import { context } from './ThemeProvider.svelte'
 
-  export let styleDefinition: StyleDefinition<HTMLElements, unknown>
+  export let styleDefinition: StyleDefinition<HTMLElements, Props>
 
   const sheet: Sheet = getStyleSheet()
 
   const theme: Writable<DefaultTheme> = getContext(context)
 
-  $: styleClassName = insert(sheet, styleDefinition, { ...$$restProps, theme: $theme })
+  $: 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)

diff --git a/packages/svelte/src/component.ts b/packages/svelte/src/component.ts
@@ -6,11 +6,13 @@ 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 {
+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) {
+    constructor(options: Options) {
       super({
         ...options,
         props: {
@@ -34,22 +36,22 @@ type Global = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): SvelteTeilerComponent<HTMLElements, Props>
 }
 
-type ComponentWithTags = Component<'div'> & { [K in HTMLElements]: Component<K> }
+type ComponentWithTags = Component<'div'> & { [K in Exclude<HTMLElements, null>]: 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)
+const svelteComponent = construct('div', component) as ComponentWithTags
 
 tags.forEach((tag) => {
-  baseComponent[tag] = construct(tag, component)
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  svelteComponent[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 }
diff --git a/packages/svelte/src/sheet.ts b/packages/svelte/src/sheet.ts
@@ -1,7 +1,7 @@
 import { type Sheet, createStyleSheet } from '@teiler/core'
 import { getContext } from 'svelte'
 
-export let styleSheet = null
+export let styleSheet: Sheet | null = null
 
 export const StyleSheet = 'STYLE_SHEET'