Merge pull request #3 from pfgray/better_demos

Adding better demos

demo/AllDemo.tsx → demo/demos/AllDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { withState } from '../src/lib/withState';
-import { all } from '../src/ChainableComponent';
-import Step from './Step';
+import { withState } from '../../src/lib/withState';
+import { all } from '../../src/ChainableComponent';
+import Step from '../Step';
 
 export const WithStateDemo =
   all([

demo/ContextDemo.tsx → demo/demos/ContextDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { fromRenderProp } from '../src/ChainableComponent';
+import { fromRenderProp } from '../../src/ChainableComponent';
 // how to create a context hoc?
-import Step from './Step';
+import Step from '../Step';
 const { Consumer, Provider } = React.createContext("Default Value");
 
 const withContext = fromRenderProp(Consumer);

demo/demos/DoDemo.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { withState } from '../../src/lib/withState';
+import { all, Do, ChainableComponent } from '../../src/ChainableComponent';
+import Step from '../Step';
+
+export const DoDemo = () =>
+  Do(function*() {
+    const a = yield withState({initial: 'string value'});
+    const b = yield withState({initial: 8432});
+    return [a, b];
+  })
+  .ap(([a, b]) => (
+    <div>
+      {/* a.value is inferred as a string */}
+      <div>a: {a.value} <button onClick={() => a.update(a.value + 1)}>+</button></div>
+
+      {/* b.value through f.value is inferred as a number */}
+      <div>b: {b.value} <button onClick={() => b.update(b.value + 1)}>+</button></div>
+    </div>
+  ));
+
+export default () => (
+  <Step title="Do Demo">
+    <pre className='code-sample'>
+      {`import { withState, all } from 'chainable-components';`}
+    </pre>
+    <DoDemo />
+  </Step>
+);
+
+

demo/demos/FromApDemo.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { withState } from '../../src/lib/withState';
+import { all, fromAp } from '../../src/ChainableComponent';
+import Step from '../Step';
+
+export const WithStateDemo =
+  fromAp((ap: (a: number) => React.ReactNode) => (
+    function() {
+      return <div>Applied: {ap(5)}</div>
+    }
+  ))
+  .ap(a => (
+    <div>wait, wuuuut: {a}</div>
+  ));
+
+export default () => (
+  <Step title="FromAp Demo">
+    <pre className='code-sample'>
+      {`import { withState, all } from 'chainable-components';`}
+    </pre>
+    {WithStateDemo}
+  </Step>
+);
+
+

demo/ReactRouterDemo.tsx → demo/demos/ReactRouterDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';;
 import { Route, Router } from 'react-router';
-import { fromRenderProp } from '../src/ChainableComponent';
-import Step from './Step';
+import { fromRenderProp } from '../../src/ChainableComponent';
+import Step from '../Step';
 import createBrowserHistory from 'history/createBrowserHistory';
 
 const customHistory = createBrowserHistory();

demo/WithStateDemo.tsx → demo/demos/WithStateDemo.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { withState } from '../src/lib/withState';
-import Step from './Step';
+import { withState } from '../../src/lib/withState';
+import Step from '../Step';
 // import { all } from '../src/ChainableComponent';
 
 export const WithStateDemo =
   withState({ initial: 0 }).chain(outer =>
     withState({ initial: 16 }).map(inner =>
       ({ inner, outer })
     )
-  )
-    .ap(({ inner, outer }) => (
+  ).ap(({ inner, outer }) => (
       <div>
         <div>Outer: {outer.value} <button onClick={() => outer.update(outer.value + 1)}>+</button></div>
         <div>Inner: {inner.value} <button onClick={() => inner.update(inner.value + 1)}>+</button></div>

demo/index.tsx

@@ -5,13 +5,15 @@ import '../styles/index.less';
 
 import './demo.less';
 
-const Demos = require.context('./', false, /\.*Demo\.tsx$/);
+const Demos = require.context('./demos', true, /\.*\.tsx$/);
 
-const APP_ELEMENT = document.getElementById('app')!;
+const APP_ELEMENT = document.body;
 const render = (Component: React.ComponentType<any>) => {
   ReactDOM.render(
     <AppContainer>
+      <div id="app">
       <Component/>
+      </div>
     </AppContainer>,
     APP_ELEMENT,
   );
@@ -25,7 +27,7 @@ render(() => <div>
 
 declare var module: any;
 if (module.hot) {
-  module.hot.accept('./Demo', () => {
-    render(require('./Demo').Demo);
-  });
+  // module.hot.accept('./Demo', () => {
+  //   render(require('./Demo').Demo);
+  // });
 }

package.json

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.0.4",
-    "@types/html-webpack-plugin": "^2.28.0",
+    "@types/html-webpack-plugin": "^2.30.3",
     "@types/mocha": "^2.2.43",
     "@types/react": "^16.0.10",
     "@types/react-dom": "^16.0.1",
@@ -39,7 +39,7 @@
     "formik": "^0.11.11",
     "history": "^4.7.2",
     "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "jsdom": "^11.3.0",
     "jsdom-global": "^3.0.2",
     "less": "^3.0.0-alpha.3",
@@ -59,7 +59,7 @@
     "typescript": "^2.5.3",
     "webpack": "^4.0.0",
     "webpack-cli": "^3.0.3",
-    "webpack-dev-server": "^2.9.1"
+    "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {},
   "peerDependencies": {

webpack/base.ts

@@ -3,10 +3,9 @@ import { CONSTANTS } from './constants';
 
 // tslint:disable-next-line no-var-requires
 
+console.log('wuuut:', CONSTANTS.APP_ENTRY);
 const config: webpack.Configuration = {
-  entry: {
-    'chainable-components': CONSTANTS.APP_ENTRY
-  },
+  entry: CONSTANTS.APP_ENTRY,
   output: {
     filename: 'chainable-components.js',
     path: CONSTANTS.DOCS_DIR,

webpack/hot.ts

@@ -1,11 +1,10 @@
 import * as webpack from 'webpack';
 import config from './base';
 import { CONSTANTS } from './constants';
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 const baseEntry = config.entry as webpack.Entry;
-const entry = {
-  ...baseEntry,
-  app: [
+const entry = [
     // activate HMR for React
     'react-hot-loader/patch',
 
@@ -16,9 +15,8 @@ const entry = {
     // bundle the client for hot reloading
     // only- means to only hot reload for successful updates
     'webpack/hot/only-dev-server',
-    baseEntry.app as string,
-  ],
-};
+    baseEntry,
+  ];
 
 const rules = (config.module as any).rules.map((loaderConf: any) => {
   if (loaderConf.test.test('test.ts')) {
@@ -45,6 +43,9 @@ const plugins = [
     'process.env.NODE_ENV': 'null',
   }),
   new webpack.HotModuleReplacementPlugin(),
+  new HtmlWebpackPlugin({
+    title: '🔗-able Components'
+  })
 ];
 
 const hotConfig = {
@@ -53,6 +54,7 @@ const hotConfig = {
   module,
   plugins,
   devtool: '#cheap-module-source-map',
+  mode: 'development',
   devServer: {
     contentBase: CONSTANTS.DOCS_DIR,
     historyApiFallback: true,