From 7af7e3f684f0854a3466a94ac4d1bb7737993875 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20van=20Br=C3=BCgge?= Date: Wed, 17 Feb 2021 14:11:12 +0100 Subject: [PATCH] feat: export everything from 'snabbdom' ISSUES CLOSED: #913, #748 BREAKING CHANGE: The imports of snabbdom functions have changed. Every file in the project had to be imported on its own, e.g. ``` import { h } from 'snabbdom/h' import { VNode } from 'snabbdom/vnode' ``` Now, the main snabbdom package exports all of the public API like ``` import { h, VNode } from 'snabbdom' ``` This means consumers of the snabbdom package need to update their imports. The change makes the use of the `exports` field in `package.json` unnecessary, which caused issues for TypeScript users --- README.md | 30 +++++++++--------------------- package.json | 22 +--------------------- src/index.ts | 30 ++++++++++++++++++++++++++++++ tsconfig.json | 2 +- 4 files changed, 41 insertions(+), 43 deletions(-) create mode 100644 src/index.ts diff --git a/README.md b/README.md index 514ef18..d47e25d 100644 --- a/README.md +++ b/README.md @@ -62,12 +62,7 @@ performance, small size and all the features listed below. ## Example ```mjs -import { init } from 'snabbdom/init' -import { classModule } from 'snabbdom/modules/class' -import { propsModule } from 'snabbdom/modules/props' -import { styleModule } from 'snabbdom/modules/style' -import { eventListenersModule } from 'snabbdom/modules/eventlisteners' -import { h } from 'snabbdom/h' // helper function for creating vnodes +import { init, classModule, propsModule, styleModule, eventListenersModule, h } from 'snabbdom'; const patch = init([ // Init patch function with chosen modules classModule, // makes it easy to toggle classes @@ -109,8 +104,8 @@ patch(vnode, newVnode) // Snabbdom efficiently updates the old view to the new s * [`init`](#init) * [`patch`](#patch) * [Unmounting](#unmounting) - * [`snabbdom/h`](#snabbdomh) - * [`snabbdom/tovnode`](#snabbdomtovnode) + * [`h`](#h) + * [`tovnode`](#tovnode) * [Hooks](#hooks) * [Overview](#overview) * [Usage](#usage) @@ -157,8 +152,7 @@ takes a list of modules and returns a `patch` function that uses the specified set of modules. ```mjs -import { classModule } from 'snabbdom/modules/class' -import { styleModule } from 'snabbdom/modules/style' +import { classModule, styleModule } from 'snabbdom' const patch = init([classModule, styleModule]) ``` @@ -194,14 +188,14 @@ patch(oldVnode, h('!', { hooks: { post: () => { /* patch complete */ } } })) Of course, then there is still a single comment node at the mount point. -### `snabbdom/h` +### `h` -It is recommended that you use `snabbdom/h` to create vnodes. `h` accepts a +It is recommended that you use `h` to create vnodes. It accepts a tag/selector as a string, an optional data object and an optional string or array of children. ```mjs -import { h } from 'snabbdom/h' +import { h } from 'snabbdom' const vnode = h('div', { style: { color: '#000' } }, [ h('h1', 'Headline'), @@ -209,19 +203,13 @@ const vnode = h('div', { style: { color: '#000' } }, [ ]) ``` -### `snabbdom/tovnode` +### `tovnode` Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, server-side generated content. ```mjs -import { init } from 'snabbdom/init' -import { classModule } from 'snabbdom/modules/class' -import { propsModule } from 'snabbdom/modules/props' -import { styleModule } from 'snabbdom/modules/style' -import { eventListenersModule } from 'snabbdom/modules/eventlisteners' -import { h } from 'snabbdom/h' // helper function for creating vnodes -import { toVNode } from 'snabbdom/tovnode' +import { init, classModule, propsModule, styleModule, eventListenersModule, h, toVNode } from 'snabbdom' const patch = init([ // Init patch function with chosen modules classModule, // makes it easy to toggle classes diff --git a/package.json b/package.json index ca14bca..d09e477 100644 --- a/package.json +++ b/package.json @@ -2,27 +2,7 @@ "name": "snabbdom", "version": "2.1.0", "description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.", - "type": "module", - "exports": { - "./init": "./build/init.js", - "./h": "./build/h.js", - "./helpers/attachto": "./build/helpers/attachto.js", - "./hooks": "./build/hooks.js", - "./htmldomapi": "./build/htmldomapi.js", - "./is": "./build/is.js", - "./jsx": "./build/jsx.js", - "./modules/attributes": "./build/modules/attributes.js", - "./modules/class": "./build/modules/class.js", - "./modules/dataset": "./build/modules/dataset.js", - "./modules/eventlisteners": "./build/modules/eventlisteners.js", - "./modules/hero": "./build/modules/hero.js", - "./modules/module": "./build/modules/module.js", - "./modules/props": "./build/modules/props.js", - "./modules/style": "./build/modules/style.js", - "./thunk": "./build/thunk.js", - "./tovnode": "./build/tovnode.js", - "./vnode": "./build/vnode.js" - }, + "module": "build/index.js", "devDependencies": { "@babel/core": "7.12.16", "@babel/preset-env": "7.12.16", diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..d203a16 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,30 @@ +// core +export { DOMAPI, htmlDomApi } from './htmldomapi'; +export { init } from './init'; +export { ThunkData, Thunk, ThunkFn, thunk } from './thunk'; +export { Key, VNode, VNodeData, vnode } from './vnode'; + +// helpers +export { AttachData, attachTo } from './helpers/attachto'; +export { array, primitive } from './is'; +export { toVNode } from './tovnode'; +export { + VNodes, + VNodeChildElement, + ArrayOrElement, + VNodeChildren, + h, +} from './h'; + +// types +export * from './hooks'; +export { Module } from './modules/module'; + +// modules +export { Attrs, attributesModule } from './modules/attributes'; +export { Classes, classModule } from './modules/class'; +export { Dataset, datasetModule } from './modules/dataset'; +export { On, eventListenersModule } from './modules/eventlisteners'; +export { Hero, heroModule } from './modules/hero'; +export { Props, propsModule } from './modules/props'; +export { VNodeStyle, styleModule } from './modules/style'; diff --git a/tsconfig.json b/tsconfig.json index 8046d4d..03983d6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,5 +9,5 @@ "target": "es6", "outDir": "build" }, - "include": ["./src/**/*"] + "include": ["./src/index.ts"] }