resolve #13

jest.config.ts

@@ -2,14 +2,27 @@ export default {
   preset: 'ts-jest',
   verbose: true,
   clearMocks: true,
-  testEnvironment: 'jsdom',
-  testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-  testMatch: ['**/test/**/*.test.[jt]s?(x)'],
+  projects: [
+    {
+      displayName: 'browser',
+      preset: 'ts-jest',
+      testEnvironment: 'jsdom',
+      testEnvironmentOptions: {
+        url: 'http://localhost',
+      },
+      testMatch: ['**/test/**/*.test.[jt]s?(x)'],
+    },
+    {
+      displayName: 'node',
+      preset: 'ts-jest',
+      testEnvironment: 'node',
+      testMatch: ['**/test/**/*.ssr-test.[jt]s?(x)'],
+    }
+  ],
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}',
     '!src/**/*.test.{ts,tsx}',
+    '!src/**/*.ssr-test.{ts,tsx}',
   ],
   coverageThreshold: {
     global: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minicomp",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Minimalistic library for creating Web Components",
   "main": "dist/commonjs/index.js",
   "module": "dist/es/index.js",

src/define.ts

@@ -3,38 +3,56 @@ import { ComponentOptions, component, FunctionalComponent } from './component'
 
 export type DefinitionOptions = ComponentOptions & ElementDefinitionOptions
 
-export type DefinableCompoennt = {
+export type DefinableCompoent = {
   tag: string
   component: FunctionalComponent
   options?: DefinitionOptions
 }
 
 
-export function define(comp: DefinableCompoennt): void
+export function define(comp: DefinableCompoent, options?: DefinitionOptions): void
 export function define(tag: string, fn: FunctionalComponent, options?: DefinitionOptions): void
 export function define(
-  tag: string | DefinableCompoennt,
-  fn?: FunctionalComponent,
+  tag: string | DefinableCompoent,
+  fn?: FunctionalComponent | DefinitionOptions,
   options?: DefinitionOptions
 ) {
   if (typeof tag === 'string') {
-    (options?.window?.customElements ?? customElements)
-      .define(tag, component(fn as FunctionalComponent, options), options)
+    const registry = options?.window?.customElements ?? customElements
+    registry.define(tag, component(fn as FunctionalComponent, options), options)
   } else {
-    ((fn as ComponentOptions)?.window?.customElements ?? customElements)
-      .define(tag.tag, component(tag.component, tag.options), tag.options)
+    const opts: DefinitionOptions = {
+      ...tag.options,
+      ...fn,
+    }
+    const registry = opts.window?.customElements ?? customElements
+    registry.define(tag.tag, component(tag.component, opts), tag.options)
   }
 }
 
 
-export function definable(tag: string, fn: FunctionalComponent, options?: ComponentOptions): DefinableCompoennt {
+export function definable(tag: string, fn: FunctionalComponent, options?: ComponentOptions): DefinableCompoent {
   return { tag, component: fn, options }
 }
 
 
 export function using(options: DefinitionOptions) {
+  function _define(comp: DefinableCompoent, opts?: DefinitionOptions): void
+  function _define(tag: string, fn: FunctionalComponent, opts?: DefinitionOptions): void
+  function _define(
+    tag: string | DefinableCompoent,
+    fn?: FunctionalComponent | DefinitionOptions,
+    opts?: DefinitionOptions
+  ) {
+    if (typeof tag === 'string') {
+      define(tag, fn as FunctionalComponent, { ...options, ...opts })
+    } else {
+      define(tag, { ...options, ...fn })
+    }
+  }
+
   return {
-    define: (tag: string, fn: FunctionalComponent) => define(tag, fn, options),
+    define: _define,
     component: (fn: FunctionalComponent) => component(fn, options),
   }
 }

src/test/define.ssr-test.ts

@@ -0,0 +1,20 @@
+jest.mock('htm/mini', () => require('htm/mini/index.umd.js'))
+
+
+import { JSDOM } from 'jsdom'
+import { using, define, definable } from '../define'
+
+
+describe(define, () => {
+  test('defines defineables in ssr environment.', () => {
+    const Comp = definable('ssr-1', () => '<div>Hellow World!</div>')
+
+    const window = new JSDOM().window as any
+    using({ window }).define(Comp)
+
+    window.document.body.innerHTML = '<ssr-1></ssr-1>'
+    const el = window.document.querySelector('ssr-1')
+    expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
+  })
+})
+

src/test/exports.test.ts

@@ -1,5 +1,5 @@
 import {
-  define, definable, DefinableCompoennt, PropableElement,
+  define, definable, DefinableCompoent, PropableElement,
   onConnected, onDisconnected, onAttributeChanged, onAdopted, onRendered,
   onPropertyChanged, currentNode, hooksMeta, ownerDocument,
   ATTRIBUTE_REMOVED, onAttribute, onProperty, onCleanup, on,
@@ -10,7 +10,7 @@ import {
 test('stuff are exported properly.', () => {
   expect(define).toBeDefined()
   expect(definable).toBeDefined()
-  expect(<DefinableCompoennt>{}).toBeDefined()
+  expect(<DefinableCompoent>{}).toBeDefined()
 
   expect(onConnected).toBeDefined()
   expect(onDisconnected).toBeDefined()