Update Pulse to 3.1.0 (#128)

Develop — updates

Author: maxichrome

.gitignore

@@ -25,6 +25,8 @@ private/
 *.sw*
 
 # Generated files from build
+build/
+declarations/
 dist/
 docs/dist/
 

.npmignore

@@ -1,2 +1,3 @@
 examples
-test
+test
+build/

_config.yml

@@ -0,0 +1,7 @@
+please do NOT change any config files without consulting Jamie first! Thanks :P
+
+handy command to remove accidental build files in lib
+
+```
+rm -f lib/**/*.(js|js.map)
+```

config/readme.md

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist",
+    "declaration": true,
+    "declarationDir": "../dist"
+  }
+}

config/tsconfig.dev.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "../declarations"
+  }
+}

config/tsconfig.prod.json

@@ -0,0 +1,14 @@
+const base = require('../webpack.config');
+
+module.exports = {
+  ...base('dev'),
+  name: 'dev',
+  mode: 'development',
+  devtool: 'inline-source-map',
+  watch: true,
+  entry: {
+    index: './lib/index.ts',
+    next: './lib/next'
+  },
+  plugins: []
+};

config/webpack.config.dev.js

@@ -0,0 +1,37 @@
+const base = require('../webpack.config');
+const dts = require('dts-bundle-webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  ...base('prod'),
+  name: 'build',
+  mode: 'production',
+  devtool: 'hidden-source-map',
+  entry: {
+    index: './lib/index.ts',
+    next: './lib/next'
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          keep_classnames: true,
+          keep_fnames: true
+        }
+      })
+    ]
+  },
+  plugins: [
+    new dts({
+      name: 'pulse-framework',
+      main: 'declarations/index.d.ts',
+      out: '../dist/index.d.ts'
+    }),
+    new dts({
+      name: 'pulse-framework/next',
+      main: 'declarations/next/index.d.ts',
+      out: '../../dist/next.d.ts'
+    })
+  ]
+};

config/webpack.config.prod.js

@@ -121,7 +121,7 @@ module.exports = {
         {
           title: 'Getting Started',
           collapsable: false,
-          children: ['getting-started/setup-with-react', 'getting-started/concepts']
+          children: ['getting-started/setup-with-react', 'getting-started/setup-with-vue', 'getting-started/concepts']
         },
         {
           title: 'Documentation',
@@ -136,6 +136,7 @@ module.exports = {
             'docs/core',
             'docs/api',
             'docs/persisting-data',
+            'docs/events',
             'docs/ssr'
           ]
         },

docs/.vuepress/config.js

@@ -1,24 +1,24 @@
 ---
 title: API
 ---
-
 ## Introduction
-
+::: warning Sorry!
+This page is not up to standards, improvements need to be made inline with the rest of the documentation.
+:::
 # API
 
 This is Pulse's integrated fetch API. It's a wrapper around Fetch, which is native to the browser environment.
-
+```ts
+const MyAPI = App.API()
+```
 ## Setup
-
-To create an api instance, you must pass a config object. This will define several things such as the options, baseurl, path, timeout and some functions to run before and after each http request.
-
+The API class accepts a config object.
 ```ts
 const MyAPI = App.API({
   options: {
     headers: {
       'content-type': 'application/json, text/plain' // this is not necessary
     }
-    // ...
   },
   baseURL: 'https://api.mysite.co', // default: 'https://localhost'
   path: '/api', // default: '/'
@@ -71,9 +71,9 @@ interface PulseResponse<DataType = any> {
 }
 ```
 
-**Available functions and Properties**
+## Methods
 
-## `API.with()`
+# `.with()`
 
 This function allows you to override the API config and request options. It returns a modified instance of the original API with the options in the config parameter overriding the original config options.
 
@@ -85,7 +85,7 @@ This function allows you to override the API config and request options. It retu
 
 - [response (Response)](#response)
 
-## `API.get()`
+# `.get()`
 
 Send a HTTP get request to a url
 
@@ -98,7 +98,7 @@ Send a HTTP get request to a url
 
 - [response (Response)](#response)
 
-## `API.post()`
+# `.post()`
 
 Send a HTTP post request to a URL
 
@@ -112,7 +112,7 @@ Send a HTTP post request to a URL
 
 - [response (Response)](#response)
 
-## `API.put()`
+# `.put()`
 
 Send a HTTP put request to a URL
 
@@ -126,7 +126,7 @@ Send a HTTP put request to a URL
 
 - [response (Response)](#response)
 
-## `API.patch()`
+# `.patch()`
 
 Send a HTTP patch request to a URL
 
@@ -140,7 +140,7 @@ Send a HTTP patch request to a URL
 
 - [Response (response)](#response)
 
-## `API.delete()`
+# `.delete()`
 
 Send a HTTP delete request to a URL
 

docs/v3/docs/api.md

@@ -66,3 +66,32 @@ _Forces the Computed instance to recompute_
 ```typescript
 MY_COMPUTED.recompute();
 ```
+
+## Initial compute
+Computed functions need to compute their value initially, however doing this upon declaration can cause issues depending on data accessed within the compute function.
+
+Normally Pulse applications use `App.Core()` to export the [Core](), but this function also acts as a way to finalize Pulse. This is a perfect opportunity to compute the initial values for all Computed instances.
+
+```ts
+const App = new Pulse(); 
+
+const MY_COMPUTED = App.Computed(() => 1 + 1);
+
+MY_COMPUTED.value // undefined
+
+const core = App.Core(myCore);
+
+MY_COMPUTED.value // 2
+```
+
+
+If they were to compute immediately after declaration, other State / Computed values in your core might not be defined yet, throwing many angry errors.
+
+If this is not the behavior you want, or you are not using a core you can bypass this logic using the config option `noCore: true`
+```ts
+const App = new Pulse({ noCore: true });
+
+const MY_COMPUTED = App.Computed(() => 1 + 1);
+
+MY_COMPUTED.value // 2
+```

docs/v3/docs/computed.md

@@ -26,62 +26,59 @@ The first parameter of the Controller function is `ControllerConfig`
 const App = new Pulse();
 
 const config = {
-    collection: App.Collection()(),
-    state: {
-        MY_STATE: App.State(boolean),
-        MY_COMPUTED_STATE: App.Computed<boolean>(() => true)
-    }
-}
+  collection: App.Collection()(),
+  state: {
+    MY_STATE: App.State(),
+    MY_COMPUTED_STATE: App.Computed(() => true)
+  }
+};
 export const accounts = App.Controller(config);
 ```
 
-### Controller Config Structure
+## Config Structure
 
-> The following example is demonstrating the structure of the `ControllerConfig` with a Typescript interface, in practice this of course would be a real object.
+Each of the below properties passed into the config will be made available on the root. Think of these as pre-defined containers within your controller.
 
-```js
-interface ControllerConfig {
-    name?: string;
-    collection?: Collection | { [name: string]: Collection }; // A single Collection, or an object of Collections
-    groups?: { [name: string]: Group } // an object of Groups
-    selectors?: { [name: string]: Selector } // an object of Selectors
-    actions?: { [name: string]: Function } // an object of functions
-    helpers?: { [name: string]: Function }  // an object of functions
-    routes?: { [name: string]: Function }  // an object of functions
-}
-```
+| parameter      | type                     | description                                                                           |
+| -------------- | ------------------------ | ------------------------------------------------------------------------------------- |
+| `state?`       | `Object` of `State`      | A container for State objects.                                                        |
+| `collection?`  | `Collection`             | The primary Collection also exposes `.groups` and `.selectors` to root of controller. |
+| `collections?` | `Object` of `Collection` | Other Collection instances this controller may need.                                  |
+| `actions?`     | `Object` of `Function`   |                                                                                       |
+| `routes?`      | `Object` of `Function`   |                                                                                       |
+| `helpers?`     | `Object` of `Function`   |                                                                                       |
 
-These are the only available properties for the `ControllerConfig`, any aditional will be ignored. However it is possible to add custom root properties ([See Below](#custom-root-properties)).
+These are the only available properties for the `ControllerConfig`, any additional will be ignored. However it is possible to add custom root properties ([See .root()](#methods)).
 
 ::: tip Type Safety
 For Typescript users, the inferred types of the object you pass in will be preserved, but only for the properties shown on the above object.
 :::
 
-## Custom Root Properties
+## Methods
+
+# `.root()`
 
 In some cases you will prefer to use more than the default Controller categories, you might want to spread actions to the root of the controller instance so they can be access like the following.
 
 ```js
 accounts.myAction();
 ```
 
-We can do this with the second parameter of the `App.Controller` function. The properties of the supplied object will be spread to the root of the Controller instance.
+The `Controller.root()` method will return the Controller instance with the properties of the object supplied infused into the Controller at root level.
 
-In order to maintain type safety we can export the account and cast a custom type that combines the `controller` with `actions` in this case.
+```ts
+const state = { MY_STATE: App.State() };
+const actions = { myAction: App.Action() };
 
-```js
-const controller = App.Controller({
-    state: AccountState,
-    collection: AccountCollection,
-    routes,
-}, actions);
+const controller = App.Controller({ state }).root(actions);
 
-export const accounts = controller as typeof controller & typeof actions;
+controller.state.MY_STATE;
+controller.myAction();
 ```
 
 ## Structure
 
-This is how a controller folder should be organised.
+This is how a controller folder should be organized.
 
 ### `index.ts`
 
@@ -94,10 +91,7 @@ import { state, computed, collection } from './state';
 import * as actions from './actions';
 
 // init controller, merge state and computed state
-const controller = App.Controller({ state: { ...state, ...computed }, collection }, actions);
-
-// export with typesaftey
-export default controller as typeof controller & typeof actions;
+const controller = App.Controller({ state: { ...state, ...computed }, collection }).root(actions);
 ```
 
 The order of imports above is important, state/collections must be imported first to also allow them to be imported into `actions.ts` without creating a cyclic import. Sometimes this can cause `import * as ...` to return an empty object at runtime, following this structure will avoid that.
@@ -108,22 +102,22 @@ The order of imports above is important, state/collections must be imported firs
 import App from '../../app';
 
 export const collection = App.Collection()(Collection => ({
-    groups: {
-        MY_GROUP: Collection.Group()
-    }
-}))
+  groups: {
+    MY_GROUP: Collection.Group()
+  }
+}));
 
 export const state = {
-    MY_STATE: App.State('hello')
-    // etc...
-}
+  MY_STATE: App.State('hello')
+  // etc...
+};
 
 export const computed = {
-    MY_COMPUTED: App.Computed(() => {
-        return 1 + 2
-    })
-    // etc...
-}
+  MY_COMPUTED: App.Computed(() => {
+    return 1 + 2;
+  })
+  // etc...
+};
 ```
 
 ### `actions.ts`