jason-rails 0.3.0

data/client/lib/createJasonReducers.d.ts

@@ -0,0 +1 @@
+export default function createJasonReducers(schema: any): any;

data/client/lib/createJasonReducers.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const toolkit_1 = require("@reduxjs/toolkit");
+const pluralize_1 = __importDefault(require("pluralize"));
+const lodash_1 = __importDefault(require("lodash"));
+function generateSlices(schema) {
+    const sliceNames = schema.map(k => pluralize_1.default(k));
+    const adapter = toolkit_1.createEntityAdapter();
+    return lodash_1.default.fromPairs(lodash_1.default.map(sliceNames, name => {
+        return [name, toolkit_1.createSlice({
+                name,
+                initialState: adapter.getInitialState(),
+                reducers: {
+                    upsert: adapter.upsertOne,
+                    upsertMany: adapter.upsertMany,
+                    add: adapter.addOne,
+                    setAll: adapter.setAll,
+                    remove: adapter.removeOne,
+                    movePriority: (s, { payload: { id, priority, parentFilter } }) => {
+                        // Get IDs and insert our item at the new index
+                        var affectedIds = lodash_1.default.orderBy(lodash_1.default.filter(lodash_1.default.values(s.entities), parentFilter).filter(e => e.id !== id), 'priority').map(e => e.id);
+                        affectedIds.splice(priority, 0, id);
+                        // Apply update
+                        affectedIds.forEach((id, i) => s.entities[id].priority = i);
+                    }
+                }
+            }).reducer];
+    }));
+}
+function createJasonReducers(schema) {
+    return generateSlices(lodash_1.default.keys(schema));
+}
+exports.default = createJasonReducers;

data/client/lib/createPayloadHandler.d.ts

@@ -0,0 +1 @@
+export default function createPayloadHandler(dispatch: any, subscription: any, model: any, config: any): (data: any) => null | undefined;

data/client/lib/createPayloadHandler.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsonpatch_1 = require("jsonpatch");
+const humps_1 = require("humps");
+const pluralize_1 = __importDefault(require("pluralize"));
+const lodash_1 = __importDefault(require("lodash"));
+function diffSeconds(dt2, dt1) {
+    var diff = (dt2.getTime() - dt1.getTime()) / 1000;
+    return Math.abs(Math.round(diff));
+}
+function createPayloadHandler(dispatch, subscription, model, config) {
+    console.log({ model, config });
+    let payload = {};
+    let idx = 0;
+    let patchQueue = {};
+    let lastCheckAt = new Date();
+    let updateDeadline = null;
+    let checkInterval;
+    function getPayload() {
+        console.log({ getPayload: model, subscription });
+        subscription.send({ getPayload: { model, config } });
+    }
+    const tGetPayload = lodash_1.default.throttle(getPayload, 10000);
+    function dispatchPayload() {
+        const includeModels = (config.includeModels || []).map(m => lodash_1.default.camelCase(m));
+        console.log("Dispatching", { payload, includeModels });
+        includeModels.forEach(m => {
+            const subPayload = lodash_1.default.flatten(lodash_1.default.compact(humps_1.camelizeKeys(payload).map(instance => instance[m])));
+            console.log({ type: `${pluralize_1.default(m)}/upsertMany`, payload: subPayload });
+            dispatch({ type: `${pluralize_1.default(m)}/upsertMany`, payload: subPayload });
+        });
+        dispatch({ type: `${pluralize_1.default(model)}/upsertMany`, payload: humps_1.camelizeKeys(payload) });
+    }
+    function processQueue() {
+        console.log({ idx, patchQueue });
+        lastCheckAt = new Date();
+        if (patchQueue[idx]) {
+            payload = jsonpatch_1.apply_patch(payload, patchQueue[idx]);
+            if (patchQueue[idx]) {
+                dispatchPayload();
+            }
+            delete patchQueue[idx];
+            idx++;
+            updateDeadline = null;
+            processQueue();
+            // If there are updates in the queue that are ahead of the index, some have arrived out of order
+            // Set a deadline for new updates before it declares the update missing and refetches.
+        }
+        else if (lodash_1.default.keys(patchQueue).length > 0 && !updateDeadline) {
+            var t = new Date();
+            t.setSeconds(t.getSeconds() + 3);
+            updateDeadline = t;
+            setTimeout(processQueue, 3100);
+            // If more than 10 updates in queue, or deadline has passed, restart
+        }
+        else if (lodash_1.default.keys(patchQueue).length > 10 || (updateDeadline && diffSeconds(updateDeadline, new Date()) < 0)) {
+            tGetPayload();
+            updateDeadline = null;
+        }
+    }
+    function handlePayload(data) {
+        const { value, idx: newIdx, diff, latency, type } = data;
+        console.log({ data });
+        if (type === 'payload') {
+            if (!value)
+                return null;
+            payload = value;
+            dispatchPayload();
+            idx = newIdx + 1;
+            // Clear any old changes left in the queue
+            patchQueue = lodash_1.default.pick(patchQueue, lodash_1.default.keys(patchQueue).filter(k => k > newIdx + 1));
+            return;
+        }
+        patchQueue[newIdx] = diff;
+        processQueue();
+        if (diffSeconds((new Date()), lastCheckAt) >= 3) {
+            lastCheckAt = new Date();
+            console.log('Interval lost. Pulling from server');
+            tGetPayload();
+        }
+    }
+    return handlePayload;
+}
+exports.default = createPayloadHandler;

data/client/lib/index.d.ts

@@ -0,0 +1,10 @@
+import _useAct from './useAct';
+import _useSub from './useSub';
+export declare const JasonProvider: ({ reducers, middleware, extraActions, children }: {
+    reducers: any;
+    middleware: any;
+    extraActions: any;
+    children: any;
+}) => any;
+export declare const useAct: typeof _useAct;
+export declare const useSub: typeof _useSub;

data/client/lib/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSub = exports.useAct = exports.JasonProvider = void 0;
+const JasonProvider_1 = __importDefault(require("./JasonProvider"));
+const useAct_1 = __importDefault(require("./useAct"));
+const useSub_1 = __importDefault(require("./useSub"));
+exports.JasonProvider = JasonProvider_1.default;
+exports.useAct = useAct_1.default;
+exports.useSub = useSub_1.default;

data/client/lib/makeEager.d.ts

@@ -0,0 +1 @@
+export default function (schema: any): (entity: any, id?: null, relations?: never[]) => any;

data/client/lib/makeEager.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const pluralize_1 = __importDefault(require("pluralize"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_redux_1 = require("react-redux");
+function default_1(schema) {
+    function addRelations(s, objects, objectType, relations) {
+        // first find out relation name
+        if (lodash_1.default.isArray(relations)) {
+            relations.forEach(relation => {
+                objects = addRelations(s, objects, objectType, relation);
+            });
+        }
+        else if (typeof (relations) === 'object') {
+            const relation = Object.keys(relations)[0];
+            const subRelations = relations[relation];
+            objects = addRelations(s, objects, objectType, relation);
+            objects[relation] = addRelations(s, objects[relation], pluralize_1.default(relation), subRelations);
+            // #
+        }
+        else if (typeof (relations) === 'string') {
+            const relation = relations;
+            if (lodash_1.default.isArray(objects)) {
+                objects = objects.map(obj => addRelations(s, obj, objectType, relation));
+            }
+            else {
+                const relatedObjects = lodash_1.default.values(s[pluralize_1.default(relation)].entities);
+                if (pluralize_1.default.isSingular(relation)) {
+                    objects = Object.assign(Object.assign({}, objects), { [relation]: lodash_1.default.find(relatedObjects, { id: objects[relation + 'Id'] }) });
+                }
+                else {
+                    objects = Object.assign(Object.assign({}, objects), { [relation]: relatedObjects.filter(e => e[pluralize_1.default.singular(objectType) + 'Id'] === objects.id) });
+                }
+            }
+        }
+        return objects;
+    }
+    function useEager(entity, id = null, relations = []) {
+        if (id) {
+            return react_redux_1.useSelector(s => addRelations(s, Object.assign({}, s[entity].entities[String(id)]), entity, relations));
+        }
+        else {
+            return react_redux_1.useSelector(s => addRelations(s, lodash_1.default.values(s[entity].entities), entity, relations));
+        }
+    }
+    return useEager;
+}
+exports.default = default_1;

data/client/lib/useAct.d.ts

@@ -0,0 +1 @@
+export default function useAct(): any;

data/client/lib/useAct.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const JasonContext_1 = __importDefault(require("./JasonContext"));
+const react_1 = require("react");
+function useAct() {
+    const { actions } = react_1.useContext(JasonContext_1.default);
+    return actions;
+}
+exports.default = useAct;

data/client/lib/useSub.d.ts

@@ -0,0 +1 @@
+export default function useSub(config: any): void;

data/client/lib/useSub.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const JasonContext_1 = __importDefault(require("./JasonContext"));
+const react_1 = require("react");
+function useSub(config) {
+    const subscribe = react_1.useContext(JasonContext_1.default).subscribe;
+    react_1.useEffect(() => {
+        return subscribe(config);
+    }, []);
+}
+exports.default = useSub;

data/client/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@jamesr2323/jason",
+  "version": "0.3.0",
+  "module": "./lib/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@rails/actioncable": "^6.0.3-4",
+    "axios": "^0.21.0",
+    "axios-case-converter": "^0.6.0",
+    "blueimp-md5": "^2.18.0",
+    "humps": "^2.0.1",
+    "jsonpatch": "^3.0.1",
+    "lodash": "^4.17.20",
+    "pluralize": "^8.0.0",
+    "uuid": "^8.3.1"
+  },
+  "devDependencies": {
+    "typescript": "^4.1.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.3",
+    "react-redux": "^7.2.2",
+    "@reduxjs/toolkit": "^1.5.0"
+  }
+}

data/client/src/JasonContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const context = createContext({ actions: {} as any, subscribe: null, eager: null })
+
+export default context

data/client/src/JasonProvider.tsx

@@ -0,0 +1,108 @@
+import createActions from './createActions'
+import { createConsumer } from "@rails/actioncable"
+import JasonContext from './JasonContext'
+import axios from 'axios'
+import applyCaseMiddleware from 'axios-case-converter'
+import { Provider } from 'react-redux'
+import { createEntityAdapter, createSlice, createReducer, configureStore } from '@reduxjs/toolkit'
+import createJasonReducers from './createJasonReducers'
+import createPayloadHandler from './createPayloadHandler'
+import makeEager from './makeEager'
+import { camelizeKeys } from 'humps'
+import md5 from 'blueimp-md5'
+import _ from 'lodash'
+import React, { useState, useEffect } from 'react'
+
+const JasonProvider = ({ reducers, middleware, extraActions, children }) => {
+  const [store, setStore] = useState(null)
+  const [value, setValue] = useState(null)
+  const [connected, setConnected] = useState(false)
+
+  const csrfToken = (document.querySelector("meta[name=csrf-token]") as any).content
+  axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
+  const restClient = applyCaseMiddleware(axios.create())
+
+  useEffect(() => {
+    restClient.get('/jason/api/schema')
+    .then(({ data: snakey_schema }) => {
+      const schema = camelizeKeys(snakey_schema)
+
+      const consumer = createConsumer()
+      const allReducers = {
+        ...reducers,
+        ...createJasonReducers(schema)
+      }
+
+      console.log({ schema, allReducers })
+      const store = configureStore({ reducer: allReducers, middleware })
+
+      let payloadHandlers = {}
+      function handlePayload(payload) {
+        const { model, md5Hash } = payload
+        console.log({ md5Hash, fn: `${model}:${md5Hash}`, payloadHandlers, model: _.camelCase(model), payload })
+        const handler = payloadHandlers[`${_.camelCase(model)}:${md5Hash}`]
+        if (handler) {
+          handler({ ...payload, model: _.camelCase(model) })
+        }
+      }
+
+      const subscription = (consumer.subscriptions.create({
+        channel: 'Jason::Channel'
+      }, {
+        connected: () => {
+          setConnected(true)
+        },
+        received: payload => {
+          console.log("Payload received", payload)
+          handlePayload(payload)
+        },
+        disconnected: () => console.warn('Disconnected from ActionCable')
+      }));
+
+      console.log('sending message')
+      subscription.send({ message: 'test' })
+
+      function createSubscription(config) {
+        const md5Hash = md5(JSON.stringify(config))
+        console.log('Subscribe with', config, md5Hash)
+
+        _.map(config, (v, model) => {
+          payloadHandlers[`${model}:${md5Hash}`] = createPayloadHandler(store.dispatch, subscription, model, schema[model])
+        })
+        subscription.send({ createSubscription: config })
+
+        return () => removeSubscription(config)
+      }
+
+      function removeSubscription(config) {
+        subscription.send({ removeSubscription: config })
+        const md5Hash = md5(JSON.stringify(config))
+        _.map(config, (v, model) => {
+          delete payloadHandlers[`${model}:${md5Hash}`]
+        })
+      }
+
+      const actions = createActions(schema, store, restClient, extraActions)
+      const eager = makeEager(schema)
+
+      console.log({ actions })
+
+      setValue({
+        actions: actions,
+        subscribe: (config) => createSubscription(config),
+        eager
+      })
+      setStore(store)
+    })
+  }, [])
+
+  if(!(store && value && connected)) return <div /> // Wait for async fetch of schema to complete
+
+  return <Provider store={store}>
+    <JasonContext.Provider value={value}>{ children }</JasonContext.Provider>
+  </Provider>
+}
+
+export default JasonProvider
+
+

data/client/src/actionFactory.ts

@@ -0,0 +1,34 @@
+import pluralize from 'pluralize'
+import _ from 'lodash'
+import { v4 as uuidv4 } from 'uuid'
+
+export default (dis, store, entity, { extraActions = {}, hasPriority = false } = {}) => {
+  function add(data = {}) {
+    const id = uuidv4()
+    return dis({ type: `${pluralize(entity)}/add`, payload: { id, ...data } })
+  }
+
+  function upsert(id, data) {
+    return dis({ type: `${pluralize(entity)}/upsert`, payload: { id, ...data } })
+  }
+
+  function movePriority(id, priority, parentFilter = {}) {
+    return dis({ type: `${pluralize(entity)}/movePriority`, payload: { id, priority, parentFilter } })
+  }
+
+  function setAll(data) {
+    return dis({ type: `${pluralize(entity)}/setAll`, payload: data })
+  }
+
+  function remove(id) {
+    return dis({ type: `${pluralize(entity)}/remove`, payload: id })
+  }
+
+  const extraActionsResolved = _.mapValues(extraActions, v => v(dis, store, entity))
+
+  if (hasPriority) {
+    return { add, upsert, setAll, remove, movePriority, ...extraActionsResolved }
+  } else {
+    return { add, upsert, setAll, remove, ...extraActionsResolved }
+  }
+}

data/client/src/createActions.ts

@@ -0,0 +1,50 @@
+import actionFactory from './actionFactory'
+import pluralize from 'pluralize'
+import _ from 'lodash'
+import { v4 as uuidv4 } from 'uuid'
+
+function enrich(type, payload) {
+  if (type.split('/')[1] === 'upsert' && !(type.split('/')[0] === 'session')) {
+    if (!payload.id) {
+      return { ...payload, id: uuidv4() }
+    }
+  }
+  return payload
+}
+
+function makeOptDis(schema, dispatch, restClient) {
+  const plurals = _.keys(schema).map(k => pluralize(k))
+
+  return function (action) {
+    const { type, payload } = action
+    const data = enrich(type, payload)
+
+    dispatch(action)
+
+    if (plurals.indexOf(type.split('/')[0]) > -1) {
+      return restClient.post('/jason/api/action', { type, payload: data } )
+        .catch(e => {
+          dispatch({ type: 'upsertLocalUi', data: { error: JSON.stringify(e) } })
+        })
+    }
+  }
+}
+
+function createActions(schema, store, restClient, extraActions) {
+  const dis = store.dispatch;
+  const optDis = makeOptDis(schema, dis, restClient)
+
+  const actions =  _.fromPairs(_.map(schema, (config, model: string) => {
+    if (config.priorityScope) {
+      return [pluralize(model), actionFactory(optDis, store, model, { hasPriority: true })]
+    } else {
+      return [pluralize(model), actionFactory(optDis, store, model)]
+    }
+  }))
+
+  const extraActionsResolved = extraActions(optDis, store, restClient)
+
+  return _.merge(actions, extraActionsResolved)
+}
+
+export default createActions