Joined three differnent packages to one single package

README.md

@@ -26,36 +26,114 @@ npm install
 npm run storybook
 ```
 
-## Example
+## Examples
+
+### Stateless components (variant 1)
+
+```jsx
+import { h, render } from 'preact'
+import { statelessComponent } from 'preactive'
+
+const HelloWorld = statelessComponent('HelloWorld', props => {
+  return (
+    <div>
+      {props.salutation || 'Hello'}, {props.name || 'world'}
+    </div>
+  )
+})
+```
+
+### Stateless components (variant 2)
+
+```jsx
+import { h, render } from 'preact'
+import { statelessComponent } from 'preactive'
+
+const HelloWorld = statelessComponent('HelloWorld', ({
+  salutation = 'Hello',
+  name = 'world'
+}) => {
+  return (
+    <div>
+      {props.salutation}, {props.name}
+    </div>
+  )
+})
+```
+### Stateless components (variant 3)
+
+```jsx
+import { h, render } from 'preact'
+import { statelessComponent } from 'preactive'
+
+const HelloWorld = statelessComponent({
+  displayName: 'HelloWorld',
+
+  defaultProps: {
+    salutation: 'Hello',
+    name: 'world'
+  }
+}, props => {
+  return (
+    <div>
+      {props.salutation}, {props.name}
+    </div>
+  )
+})
+```
+
+### Stateless components (variant 4)
 
 ```jsx
 import { h, render } from 'preact'
-import { statefulComponent } from 'preactive'
-import { useValue } from 'preactive/hooks'
+import { statelessComponent } from 'preactive'
+
+const HelloWorld = statelessComponent({
+  displayName: 'HelloWorld',
+
+  defaultProps: {
+    salutation: 'Hello',
+    name: 'world'
+  },
+
+  render: renderHelloWorld
+}
+
+function renderHelloWorld(props) {
+  return (
+    <div>
+      {props.salutation}, {props.name}
+    </div>
+  )
+}
+```
+
+### Stateful components (variant 1)
+
+```jsx
+import { h, render } from 'preact'
+import { statefulComponent, useValue } from 'preactive'
 
 const Counter = statefulComponent('Counter', (c, props) => {
   const
     [count, setCount] = useValue(c, props.initialValue || 0),
-    onIncrement = () => setCount(it => it + 1),
-    onInput = ev => setCount(ev.currentTarget.valueAsNumber)
+    onIncrement = () => setCount(it => it + 1)
 
   return () =>
     <div>
       <label>{props.label || 'Counter'}: </label>
-      <input type="number" value={count.value} onInput={onInput} />
       <button onClick={onIncrement}>{count.value}</button>
     </div>
 })
 
 render(<Counter/>, document.getElementById('app'))
 ```
 
-### Alternative syntax
+### Stateful components (variant 2)
 
 ```jsx
 import { h, render } from 'preact'
-import { statefulComponent } from 'preactive'
-import { useValue } from 'preactive/hooks'
+import { statefulComponent, useValue } from 'preactive'
 
 const Counter = statefulComponent({
   displayName: 'Counter',
@@ -67,26 +145,23 @@ const Counter = statefulComponent({
 }, (c, props) => {
   const
     [count, setCount] = useValue(c, props.initialValue),
-    onIncrement = () => setCount(it => it + 1),
-    onInput = ev => setCount(ev.currentTarget.valueAsNumber)
+    onIncrement = () => setCount(it => it + 1)
 
   return () =>
     <div>
       <label>{props.label}: </label>
-      <input type="number" value={count.value} onInput={onInput} />
       <button onClick={onIncrement}>{count.value}</button>
     </div>
 })
 
 render(<Counter/>, document.getElementById('app'))
 ```
 
-### Another alternative syntax
+### Stateful components (variant 3)
 
 ```jsx
 import { h, render } from 'preact'
-import { statefulComponent } from 'preactive'
-import { useValue } from 'preactive/hooks'
+import { statefulComponent, useValue } from 'preactive'
 
 const Counter = statefulComponent({
   displayName: 'Counter',
@@ -102,13 +177,11 @@ const Counter = statefulComponent({
 function initCounter(c, props) {
   const
     [count, setCount] = useValue(c, props.initialValue),
-    onIncrement = () => setCount(it => it + 1),
-    onInput = ev => setCount(ev.currentTarget.valueAsNumber)
+    onIncrement = () => setCount(it => it + 1)
 
   return () =>
     <div>
       <label>{props.label}: </label>
-      <input type="number" value={count.value} onInput={onInput} />
       <button onClick={onIncrement}>{count.value}</button>
     </div>
 })
@@ -143,19 +216,24 @@ type Context<T> = Preact.Context<T>
 
 ## API
 
-### *Package 'preactive'*
+### *component definition*
 
 - `statelessComponent(displayName, render: props => vnode)`
+- `statelessComponent(meta, render: props => vnode)`
+- `statelessComponent(config)`
+
 - `statefulComponent(displayName, init: c => props => vnode)`
+- `statefulComponent(meta, init: c => props => vnode)`
+- `statefulComponent(config)`
 
-### *Package 'preactive/utils'*
+### *utility functions*
 
 - `isMounted(c)`
 - `forceUpdate(c)`
 - `asRef(valueOrRef)`
 - `toRef(getter)`
 
-### *Package 'preactive/hooks'*
+### *hooks*
 
 - `useValue(c, initialValue)`
 - `useState(c, initialStateObject)`
@@ -164,6 +242,6 @@ type Context<T> = Preact.Context<T>
 - `useEffect(c, action, () => dependencies)`
 - `useInterval(c, action, milliseconds)`
 
-## Project status
+## Project state
 
 This R&D project is still in a very early development state

index.js

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

package.json

@@ -1,14 +1,12 @@
 {
   "name": "preactive",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "",
   "main": "index.js",
-  "module": "dist/preactive.core.esm.producion.js",
-  "unpkg": "dist/preactive.core.umd.production.js",
+  "module": "dist/preactive.esm.producion.js",
+  "unpkg": "dist/preactive.umd.production.js",
   "files": [
     "index.js",
-    "utils",
-    "hooks",
     "dist"
   ],
   "scripts": {

src/main/core.js

@@ -1,4 +1,4 @@
-import { memo, Component } from 'preact'
+import { Component } from 'preact'
 import * as Spec from 'js-spec/validators'
 
 // Brrrr, this is horrible as hell - please fix asap!!!!
@@ -213,25 +213,31 @@ export function statefulComponent(arg1, arg2) {
 
 // --- locals --------------------------------------------------------
 
-const validateStatelessComponentConfig =
-  Spec.exact({
-    displayName: Spec.match(REGEX_DISPLAY_NAME),
-    memoize: Spec.optional(Spec.boolean),
-    validate: Spec.optional(Spec.func),
-
-    defaultProps: Spec.optional(Spec.object),
-    render: Spec.func
-  })
-
-const validateStatefulComponentConfig =
-  Spec.exact({
-    displayName: Spec.match(REGEX_DISPLAY_NAME),
-    memoize: Spec.optional(Spec.boolean),
-    validate: Spec.optional(Spec.func),
-
-    defaultProps: Spec.optional(Spec.object),
-    init: Spec.func
-  })
+let
+  validateStatelessComponentConfig,
+  validateStatefulComponentConfig
+
+if (process.env.NODE_ENV === 'development') {
+  validateStatelessComponentConfig =
+    Spec.exact({
+      displayName: Spec.match(REGEX_DISPLAY_NAME),
+      memoize: Spec.optional(Spec.boolean),
+      validate: Spec.optional(Spec.func),
+
+      defaultProps: Spec.optional(Spec.object),
+      render: Spec.func
+    })
+
+  validateStatefulComponentConfig =
+    Spec.exact({
+      displayName: Spec.match(REGEX_DISPLAY_NAME),
+      memoize: Spec.optional(Spec.boolean),
+      validate: Spec.optional(Spec.func),
+
+      defaultProps: Spec.optional(Spec.object),
+      init: Spec.func
+    })
+}
 
 function hasOnwProp(obj, propName) {
   return Object.prototype.hasOwnProperty.call(obj, propName)

src/main/index.js

@@ -0,0 +1,3 @@
+export * from './core'
+export * from './utils'
+export * from './hooks'

src/stories/demo.stories.jsx

@@ -1,8 +1,9 @@
 import { h, createContext } from 'preact'
-import { statefulComponent } from '../main/core'
 
-import { useContext, useEffect, useInterval, useMemo, useValue, useState }
-  from '../main/hooks'
+import {
+  statefulComponent,
+  useContext, useEffect, useInterval, useMemo, useValue, useState
+} from '../main'
 
 import { toRef } from '../main/utils'
 

webpack.config.js

@@ -15,31 +15,27 @@ const
 
 const configs = []
 
-for (const pkg of ['core', 'utils', 'hooks']) {
-  for (const moduleType of ['cjs', 'umd', 'esm']) {
-    for (const environment of ['development', 'production']) {
-      // TODO - this is aweful - fix it
-      configs.push(createConfig(pkg, moduleType, environment, !configs, !configs))
-    }
+for (const moduleType of ['cjs', 'umd', 'esm']) {
+  for (const environment of ['development', 'production']) {
+    // TODO - this is aweful - fix it
+    configs.push(createConfig(moduleType, environment, !configs, !configs))
   }
 }
 
 module.exports = configs
 
-function createConfig(pkg, moduleType, environment, cleanup = false, zip = false) {
+function createConfig(moduleType, environment, cleanup = false, zip = false) {
   const isProd = environment === 'production'
 
   return {
-    entry: `./src/main/${pkg}.js`,
+    entry: `./src/main/index.js`,
     mode: environment,
 
     output: {
-      library: pkg === 'core'
-        ? 'preactive'
-        : `preactive.${pkg}`,
+      library: 'preactive',
       libraryTarget:  libraryTargetMap[moduleType],
       path: path.resolve(__dirname, 'dist'),
-      filename: `preactive.${pkg}.${moduleType}.${environment}.js`
+      filename: `preactive.${moduleType}.${environment}.js`
     },
 
     externals: ['preact', 'preact/hooks', 'js-spec', 'js-spec/validators'],
@@ -88,8 +84,6 @@ function createConfig(pkg, moduleType, environment, cleanup = false, zip = false
       ]
 
       //new UglifyJsPlugin()
-    },
-
-
+    }
   }
 }