update lume cli and code formatting

.prettierrc.cjs

@@ -1,10 +1 @@
-module.exports = {
-	tabWidth: 4,
-	useTabs: true,
-	semi: false,
-	singleQuote: true,
-	trailingComma: 'all',
-	bracketSpacing: false,
-	printWidth: 120,
-	arrowParens: 'avoid',
-}
+module.exports = require('@lume/cli/.prettierrc.js')

README.md

@@ -8,8 +8,8 @@ Easily create Custom Elements with simple templates and reactivity.
 
 ## Live demos
 
--   [Using JSX and decorator syntax.](https://webcomponents.dev/edit/EJ5VTuaaO0Iwq3APUFMe)
--   [Plain JS, template strings instead of JSX, no decorators.](https://webcomponents.dev/edit/yObgikY1CK2Ef2VUPYBA)
+- [Using JSX and decorator syntax.](https://webcomponents.dev/edit/EJ5VTuaaO0Iwq3APUFMe)
+- [Plain JS, template strings instead of JSX, no decorators.](https://webcomponents.dev/edit/yObgikY1CK2Ef2VUPYBA)
 
 ## Intro
 
@@ -33,19 +33,19 @@ into an application.
 With `@lume/element` we can create custom elements that have the following
 features:
 
--   Properties are reactive variables that make it easy to react to changes in these properties.
--   Each custom element has an HTML template (in the form of [HTML markup inside JavaScript, or
-    JSX](https://facebook.github.io/jsx)) that automatically "re-renders" when any
-    reactive variable used in the template changes.
--   When a template "re-renders", the whole template doesn't render, only the
-    part of the template where a variable changed is re-rendered. The term
-    "re-render" is quoted because tempate don't really re-render, but instead
-    reactive variables are mapped to discrete parts of the live
-    [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
-    generated from a template.
--   Changes to HTML attributes on a custom element can be easily mapped to the
-    custom element's properties. Because properties are reactive, this will cause
-    the custom element's template to update.
+- Properties are reactive variables that make it easy to react to changes in these properties.
+- Each custom element has an HTML template (in the form of [HTML markup inside JavaScript, or
+  JSX](https://facebook.github.io/jsx)) that automatically "re-renders" when any
+  reactive variable used in the template changes.
+- When a template "re-renders", the whole template doesn't render, only the
+  part of the template where a variable changed is re-rendered. The term
+  "re-render" is quoted because tempate don't really re-render, but instead
+  reactive variables are mapped to discrete parts of the live
+  [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+  generated from a template.
+- Changes to HTML attributes on a custom element can be easily mapped to the
+  custom element's properties. Because properties are reactive, this will cause
+  the custom element's template to update.
 
 Additionally `@lume/element` can be used to create and manipulate trees of
 DOM elements without necessarily creating new custom elements.
@@ -368,15 +368,15 @@ document.body.appendChild(el)
 
 The main differences from plain JS are
 
--   Use of the `@jsxImportSource` comment to place JSX types into scope. This is
-    required, or TypeScript will not know what the types of elements in JSX
-    markup are. Alternative to comments, configure it in tsconfig.json's
-    `compilerOptions`.
--   The `div()` helper function explicitly returns the type `HTMLDivElement` so
-    that the `el` variable will be typed as `HTMLDivElement` instead of
-    `JSX.Element`. Under the hood, the `div()` function is an identity function
-    at runtime, it simply returns whatever you pass into it, and serves only as a
-    convenient type cast helper.
+- Use of the `@jsxImportSource` comment to place JSX types into scope. This is
+  required, or TypeScript will not know what the types of elements in JSX
+  markup are. Alternative to comments, configure it in tsconfig.json's
+  `compilerOptions`.
+- The `div()` helper function explicitly returns the type `HTMLDivElement` so
+  that the `el` variable will be typed as `HTMLDivElement` instead of
+  `JSX.Element`. Under the hood, the `div()` function is an identity function
+  at runtime, it simply returns whatever you pass into it, and serves only as a
+  convenient type cast helper.
 
 Caution! :warning: Keep in mind to use the correct type helper depending on what the root
 element of the JSX expression is. For for example, if the root of a JSX is a `<menu>`
@@ -422,11 +422,11 @@ example is also not type safe:
 /* @jsxImportSource @lume/element */
 
 // GOOD.
-const el = ((<menu>...</menu>) as any) as HTMLMenuElement
+const el = (<menu>...</menu>) as any as HTMLMenuElement
 
 // BAD! Don't do this! Remember to double check, because the helpers are not
 // type safe, you will not get an error here.
-const el2 = ((<menu>...</menu>) as any) as HTMLDivElement
+const el2 = (<menu>...</menu>) as any as HTMLDivElement
 ```
 
 #### Type definitions for custom elements

babel-preset.cjs

@@ -1,4 +1,4 @@
-module.exports = function(context, options = {}) {
+module.exports = function (context, options = {}) {
 	options.moduleName = options.moduleName || '@lume/element'
 	return require('babel-preset-solid')(context, options)
 }

package.json

@@ -39,10 +39,11 @@
 		"solid-js": "^0.24.4"
 	},
 	"devDependencies": {
-		"@lume/cli": "^0.5.1",
+		"@lume/cli": "^0.5.5",
 		"@types/react": "^17.0.0",
 		"ncp": "^2.0.0",
-		"prettier": "^2.0.0"
+		"prettier": "^2.0.0",
+		"typescript": "^4.3.0-beta"
 	},
 	"repository": {
 		"type": "git",

src/LumeElement.ts

@@ -362,7 +362,7 @@ type Template = TemplateContent | (() => TemplateContent)
 export type ElementAttributes<
 	ElementType,
 	SelectedProperties extends keyof ElementType,
-	AdditionalProperties extends object = {}
+	AdditionalProperties extends object = {},
 > = WithStringValues<DashCasedProps<Partial<Pick<ElementType, SelectedProperties>>>> &
 	AdditionalProperties &
 	Omit<JSX.HTMLAttributes<ElementType>, SelectedProperties | keyof AdditionalProperties>

src/type-helpers.ts

@@ -4,40 +4,40 @@ import type {JSX} from './jsx-runtime'
 
 // These are for use in TypeScript to cast JSX to certain DOM types. They are
 // not needed in plain JavaScript.
-export const div = (e: JSX.Element) => (e as any) as HTMLDivElement
-export const h1 = (e: JSX.Element) => (e as any) as HTMLHeadingElement
-export const h2 = (e: JSX.Element) => (e as any) as HTMLHeadingElement
-export const h3 = (e: JSX.Element) => (e as any) as HTMLHeadingElement
-export const h4 = (e: JSX.Element) => (e as any) as HTMLHeadingElement
-export const h5 = (e: JSX.Element) => (e as any) as HTMLHeadingElement
-export const h6 = (e: JSX.Element) => (e as any) as HTMLHeadingElement
-export const p = (e: JSX.Element) => (e as any) as HTMLParagraphElement
-export const span = (e: JSX.Element) => (e as any) as HTMLSpanElement
-export const br = (e: JSX.Element) => (e as any) as HTMLBRElement
-export const pre = (e: JSX.Element) => (e as any) as HTMLPreElement
-export const code = (e: JSX.Element) => (e as any) as HTMLElement
-export const canvas = (e: JSX.Element) => (e as any) as HTMLCanvasElement
-export const img = (e: JSX.Element) => (e as any) as HTMLImageElement
-export const video = (e: JSX.Element) => (e as any) as HTMLVideoElement
-export const object = (e: JSX.Element) => (e as any) as HTMLVideoElement
-export const select = (e: JSX.Element) => (e as any) as HTMLSelectElement
-export const option = (e: JSX.Element) => (e as any) as HTMLOptionElement
-export const ul = (e: JSX.Element) => (e as any) as HTMLUListElement
-export const ol = (e: JSX.Element) => (e as any) as HTMLOListElement
-export const li = (e: JSX.Element) => (e as any) as HTMLLIElement
-export const iframe = (e: JSX.Element) => (e as any) as HTMLIFrameElement
-export const button = (e: JSX.Element) => (e as any) as HTMLButtonElement
-export const form = (e: JSX.Element) => (e as any) as HTMLFormElement
-export const input = (e: JSX.Element) => (e as any) as HTMLInputElement
-export const a = (e: JSX.Element) => (e as any) as HTMLAnchorElement
-export const link = (e: JSX.Element) => (e as any) as HTMLLinkElement
-export const script = (e: JSX.Element) => (e as any) as HTMLScriptElement
-export const section = (e: JSX.Element) => (e as any) as HTMLElement
-export const menu = (e: JSX.Element) => (e as any) as HTMLMenuElement
-export const svg = (e: JSX.Element) => (e as any) as SVGSVGElement
-export const q = (e: JSX.Element) => (e as any) as HTMLQuoteElement
-export const blockquote = (e: JSX.Element) => (e as any) as HTMLQuoteElement
+export const div = (e: JSX.Element) => e as any as HTMLDivElement
+export const h1 = (e: JSX.Element) => e as any as HTMLHeadingElement
+export const h2 = (e: JSX.Element) => e as any as HTMLHeadingElement
+export const h3 = (e: JSX.Element) => e as any as HTMLHeadingElement
+export const h4 = (e: JSX.Element) => e as any as HTMLHeadingElement
+export const h5 = (e: JSX.Element) => e as any as HTMLHeadingElement
+export const h6 = (e: JSX.Element) => e as any as HTMLHeadingElement
+export const p = (e: JSX.Element) => e as any as HTMLParagraphElement
+export const span = (e: JSX.Element) => e as any as HTMLSpanElement
+export const br = (e: JSX.Element) => e as any as HTMLBRElement
+export const pre = (e: JSX.Element) => e as any as HTMLPreElement
+export const code = (e: JSX.Element) => e as any as HTMLElement
+export const canvas = (e: JSX.Element) => e as any as HTMLCanvasElement
+export const img = (e: JSX.Element) => e as any as HTMLImageElement
+export const video = (e: JSX.Element) => e as any as HTMLVideoElement
+export const object = (e: JSX.Element) => e as any as HTMLVideoElement
+export const select = (e: JSX.Element) => e as any as HTMLSelectElement
+export const option = (e: JSX.Element) => e as any as HTMLOptionElement
+export const ul = (e: JSX.Element) => e as any as HTMLUListElement
+export const ol = (e: JSX.Element) => e as any as HTMLOListElement
+export const li = (e: JSX.Element) => e as any as HTMLLIElement
+export const iframe = (e: JSX.Element) => e as any as HTMLIFrameElement
+export const button = (e: JSX.Element) => e as any as HTMLButtonElement
+export const form = (e: JSX.Element) => e as any as HTMLFormElement
+export const input = (e: JSX.Element) => e as any as HTMLInputElement
+export const a = (e: JSX.Element) => e as any as HTMLAnchorElement
+export const link = (e: JSX.Element) => e as any as HTMLLinkElement
+export const script = (e: JSX.Element) => e as any as HTMLScriptElement
+export const section = (e: JSX.Element) => e as any as HTMLElement
+export const menu = (e: JSX.Element) => e as any as HTMLMenuElement
+export const svg = (e: JSX.Element) => e as any as SVGSVGElement
+export const q = (e: JSX.Element) => e as any as HTMLQuoteElement
+export const blockquote = (e: JSX.Element) => e as any as HTMLQuoteElement
 
 export function elm<T>(e: JSX.Element) {
-	return (e as any) as T
+	return e as any as T
 }