Renamed 'extensions' to 'hooks' => 'js-element/ext' to 'js-elements/hooks' | API changes | etc.

Author: mcjazzyfunky

.storybook/webpack.config.js

@@ -14,9 +14,9 @@ module.exports = ({ config }) => {
   const alias = (config.resolve && config.resolve.alias) || {}
 
   alias['js-elements$'] = path.resolve(__dirname, '../src/main/js-elements.ts')
-  alias['js-elements/ext$'] = path.resolve(
+  alias['js-elements/hooks$'] = path.resolve(
     __dirname,
-    '../src/main/js-elements-ext.ts'
+    '../src/main/js-elements-hooks.ts'
   )
 
   config.resolve.alias = alias

README.md

@@ -14,12 +14,12 @@ and btw: It is currently not meant to ever be used in production.
 ```jsx
 import { component, h, prop, render } from 'js-elements'
 
-const SayHello = component('say-hello', {
+const SayHello = component('say-hello')({
   props: {
     salutation: prop.str.opt('Hello'),
     name: prop.str.opt('World')
   }
-}, (c, props) => {
+})((c, props) => {
   return () => (
     <div>
       {props.salutation}, {props.name}!
@@ -34,26 +34,30 @@ render(<SayHello salutation="Hi" name="Jane Doe" />, '#app')
 
 ```jsx
 import { component, h, prop, render } from 'js-elements'
+import { useEffect, useState, useStyles } from 'js-elements/hooks'
 import counterStyles from './counter.css'
 
-const Counter = component('demo-counter', {
+const Counter = component('demo-counter')({
   props: {
     initialCount: prop.num.opt(0),
     label: prop.str.opt('Counter')
   }
-}, (c, props) => {
-  let count = props.initialCount
-
-  const onClick = () => {
-    ++count
-    c.refresh()
-  }
-
-  c.addStyles(counterStyles)
-  c.afterMount(() => console.log(`"${props.label}" has been mounted`))
-  c.beforeUnmount(() => console.log(`Unmounting "${props.label}"`))
-
-  c.effect(
+})(c, props) => {
+  const [state, setState] = useState(c, {
+    count: props.initialCount
+  })
+
+  const onClick = () => setState('count', it => it + 1)
+
+  useStyles(c, counterStyles)
+  
+  useOnMount(c, () => {
+    console.log(`"${props.label}" has been mounted`)
+  
+    return () => console.log(`Unmounting "${props.label}"`)
+  })
+
+  useEffect(c)(
     () => console.log(`Value of "${props.label}": ${count}`),
     () => [count]
   )
@@ -71,47 +75,16 @@ const Counter = component('demo-counter', {
 render(<Counter />, '#app')
 ```
 
-Unfortunatlely, if you are using the prettier code formatter, the
-above shown syntax will be reformatted in a way that you may not
-necessarily want.
-Therefore the following more prettier friendly alternative syntax
-is also allowed:
-
-```jsx
-import { component, h, prop } from 'js-elements'
-
-export default component('demo-counter', {
-  props: {
-    initialCount: prop.num.opt(0),
-    label: prop.str.opt('Counter')
-  }
-}).from((c, props) => {
-  let count = props.initialCount
-
-  const onClick = () => {
-    ++count
-    c.refresh()
-  }
-
-  return () => (
-    <div>
-      <label>{props.label}: </label>
-      <button onClick={onClick}>{count}</button>
-    </div>
-  )
-})
-```
-
-_js-elements_ also supports so-called "extensions" which are
+_js-elements_ supports so-called "hooks" which are
 functions similar to React hooks (but without all the magic).
-All of those "extensions" can be written completely in userland
-(means there are no such things like "core extensions").
+All of those "hooks" can be written completely in userland
+(means there are no such things like "core hooks").
 
 ```jsx
 import { component, h } from 'js-elements'
-import { useTime } from 'js-elements/ext'
+import { useTime } from 'js-elements/hooks'
 
-const Clock = component('demo-clock', (c) => {
+const Clock = component('demo-clock')((c) => {
   const getTime = useTime(c, 1000, () => new Date().toLocaleTimeString())
   return () => <div>Current time: {getTime()}</div>
 })

ext/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../dist/js-elements-hooks.cjs.production.js')
+} else {
+  module.exports = require('../dist/js-elements-hooks.cjs.development.js')
+}

ext/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "js-elements-hooks",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "module": "../dist/js-elements-hooks.esm.producion.js",
+  "unpkg": "../dist/js-elements-hooks.umd.production.js",
+  "jsdelivr": "../dist/js-elements-hooks.umd.production.js",
+  "types": "../dist/types/js-elements-hooks.d.ts"
+}