jason-rails 0.4.0 → 0.6.1

data/client/lib/JasonProvider.js

@@ -1,134 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const createActions_1 = __importDefault(require("./createActions"));
-const actioncable_1 = require("@rails/actioncable");
-const JasonContext_1 = __importDefault(require("./JasonContext"));
-const axios_1 = __importDefault(require("axios"));
-const axios_case_converter_1 = __importDefault(require("axios-case-converter"));
+const react_1 = __importDefault(require("react"));
+const useJason_1 = __importDefault(require("./useJason"));
 const react_redux_1 = require("react-redux");
-const toolkit_1 = require("@reduxjs/toolkit");
-const createJasonReducers_1 = __importDefault(require("./createJasonReducers"));
-const createPayloadHandler_1 = __importDefault(require("./createPayloadHandler"));
-const createOptDis_1 = __importDefault(require("./createOptDis"));
-const makeEager_1 = __importDefault(require("./makeEager"));
-const humps_1 = require("humps");
-const blueimp_md5_1 = __importDefault(require("blueimp-md5"));
-const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importStar(require("react"));
-const uuid_1 = require("uuid");
+const JasonContext_1 = __importDefault(require("./JasonContext"));
 const JasonProvider = ({ reducers, middleware, extraActions, children }) => {
-    const [store, setStore] = react_1.useState(null);
-    const [value, setValue] = react_1.useState(null);
-    const [connected, setConnected] = react_1.useState(false);
-    const csrfToken = document.querySelector("meta[name=csrf-token]").content;
-    axios_1.default.defaults.headers.common['X-CSRF-Token'] = csrfToken;
-    const restClient = axios_case_converter_1.default(axios_1.default.create(), {
-        preservedKeys: (key) => {
-            return uuid_1.validate(key);
-        }
-    });
-    react_1.useEffect(() => {
-        restClient.get('/jason/api/schema')
-            .then(({ data: snakey_schema }) => {
-            const schema = humps_1.camelizeKeys(snakey_schema);
-            const serverActionQueue = function () {
-                const queue = [];
-                let inFlight = false;
-                return {
-                    addItem: (item) => queue.push(item),
-                    getItem: () => {
-                        if (inFlight)
-                            return false;
-                        const item = queue.shift();
-                        if (item) {
-                            inFlight = true;
-                            return item;
-                        }
-                        return false;
-                    },
-                    itemProcessed: () => inFlight = false,
-                    fullySynced: () => queue.length === 0 && !inFlight,
-                    getData: () => ({ queue, inFlight })
-                };
-            }();
-            const consumer = actioncable_1.createConsumer();
-            const allReducers = Object.assign(Object.assign({}, reducers), createJasonReducers_1.default(schema));
-            console.log({ schema, allReducers });
-            const store = toolkit_1.configureStore({ reducer: allReducers, middleware });
-            let payloadHandlers = {};
-            function handlePayload(payload) {
-                const { model, md5Hash } = payload;
-                console.log({ md5Hash, fn: `${model}:${md5Hash}`, payloadHandlers, model: lodash_1.default.camelCase(model), payload });
-                const handler = payloadHandlers[`${lodash_1.default.camelCase(model)}:${md5Hash}`];
-                if (handler) {
-                    handler(Object.assign(Object.assign({}, payload), { model: lodash_1.default.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 = blueimp_md5_1.default(JSON.stringify(config));
-                console.log('Subscribe with', config, md5Hash);
-                lodash_1.default.map(config, (v, model) => {
-                    payloadHandlers[`${model}:${md5Hash}`] = createPayloadHandler_1.default(store.dispatch, serverActionQueue, subscription, model, schema[model]);
-                });
-                subscription.send({ createSubscription: config });
-                return () => removeSubscription(config);
-            }
-            function removeSubscription(config) {
-                subscription.send({ removeSubscription: config });
-                const md5Hash = blueimp_md5_1.default(JSON.stringify(config));
-                lodash_1.default.map(config, (v, model) => {
-                    delete payloadHandlers[`${model}:${md5Hash}`];
-                });
-            }
-            const optDis = createOptDis_1.default(schema, store.dispatch, restClient, serverActionQueue);
-            const actions = createActions_1.default(schema, store, restClient, optDis, extraActions);
-            const eager = makeEager_1.default(schema);
-            console.log({ actions });
-            setValue({
-                actions: actions,
-                subscribe: (config) => createSubscription(config),
-                eager
-            });
-            setStore(store);
-        });
-    }, []);
-    if (!(store && value && connected))
+    const [store, value] = useJason_1.default({ reducers, middleware, extraActions });
+    if (!(store && value))
         return react_1.default.createElement("div", null); // Wait for async fetch of schema to complete
     return react_1.default.createElement(react_redux_1.Provider, { store: store },
         react_1.default.createElement(JasonContext_1.default.Provider, { value: value }, children));

data/client/lib/createJasonReducers.js

@@ -6,8 +6,8 @@ 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));
+function generateSlices(models) {
+    const sliceNames = models.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({
@@ -31,7 +31,52 @@ function generateSlices(schema) {
             }).reducer];
     }));
 }
+function generateJasonSlices(models) {
+    const initialState = lodash_1.default.fromPairs(lodash_1.default.map(models, (model_name) => {
+        return [model_name, {}];
+    }));
+    const modelSliceReducer = toolkit_1.createSlice({
+        name: 'jasonModels',
+        initialState,
+        reducers: {
+            setSubscriptionIds(s, a) {
+                const { payload } = a;
+                const { subscriptionId, model, ids } = payload;
+                console.log({ initialState });
+                s[model][subscriptionId] = ids;
+            },
+            addSubscriptionId(s, a) {
+                const { payload } = a;
+                const { subscriptionId, model, id } = payload;
+                s[model][subscriptionId] = lodash_1.default.union(s[model][subscriptionId] || [], [id]);
+            },
+            removeSubscriptionId(s, a) {
+                const { payload } = a;
+                const { subscriptionId, model, id } = payload;
+                s[model][subscriptionId] = lodash_1.default.remove(s[model][subscriptionId] || [], id);
+            },
+            removeSubscription(s, a) {
+                const { payload: { subscriptionId } } = a;
+                lodash_1.default.map(models, model => {
+                    delete s[model][subscriptionId];
+                });
+            }
+        }
+    }).reducer;
+    const jasonSliceReducer = toolkit_1.createSlice({
+        name: 'jason',
+        initialState: {
+            connected: false,
+            queueSize: 0
+        },
+        reducers: {
+            upsert: (s, a) => (Object.assign(Object.assign({}, s), a.payload))
+        }
+    }).reducer;
+    return { jason: jasonSliceReducer, jasonModels: modelSliceReducer };
+}
 function createJasonReducers(schema) {
-    return generateSlices(lodash_1.default.keys(schema));
+    const models = lodash_1.default.keys(schema);
+    return Object.assign(Object.assign({}, generateSlices(models)), generateJasonSlices(models));
 }
 exports.default = createJasonReducers;

data/client/lib/createOptDis.js

@@ -16,7 +16,6 @@ function enrich(type, payload) {
 }
 function createOptDis(schema, dispatch, restClient, serverActionQueue) {
     const plurals = lodash_1.default.keys(schema).map(k => pluralize_1.default(k));
-    let inFlight = false;
     function enqueueServerAction(action) {
         serverActionQueue.addItem(action);
     }
@@ -24,7 +23,6 @@ function createOptDis(schema, dispatch, restClient, serverActionQueue) {
         const action = serverActionQueue.getItem();
         if (!action)
             return;
-        inFlight = true;
         restClient.post('/jason/api/action', action)
             .then(serverActionQueue.itemProcessed)
             .catch(e => {

data/client/lib/createPayloadHandler.d.ts

@@ -1 +1,9 @@
-export default function createPayloadHandler(dispatch: any, serverActionQueue: any, subscription: any, model: any, config: any): (data: any) => null | undefined;
+export default function createPayloadHandler({ dispatch, serverActionQueue, transportAdapter, config }: {
+    dispatch: any;
+    serverActionQueue: any;
+    transportAdapter: any;
+    config: any;
+}): {
+    handlePayload: (data: any) => void;
+    tearDown: () => void;
+};

data/client/lib/createPayloadHandler.js

@@ -3,7 +3,6 @@ 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 deepCamelizeKeys_1 = __importDefault(require("./deepCamelizeKeys"));
 const pluralize_1 = __importDefault(require("pluralize"));
 const lodash_1 = __importDefault(require("lodash"));
@@ -12,93 +11,86 @@ function diffSeconds(dt2, dt1) {
     var diff = (dt2.getTime() - dt1.getTime()) / 1000;
     return Math.abs(Math.round(diff));
 }
-function createPayloadHandler(dispatch, serverActionQueue, subscription, model, config) {
-    console.log({ model, config });
-    let payload = [];
-    let previousPayload = [];
-    let idx = 0;
+function createPayloadHandler({ dispatch, serverActionQueue, transportAdapter, config }) {
+    const subscriptionId = uuid_1.v4();
+    let idx = {};
     let patchQueue = {};
     let lastCheckAt = new Date();
     let updateDeadline = null;
     let checkInterval;
     function getPayload() {
-        console.log({ getPayload: model, subscription });
-        subscription.send({ getPayload: { model, config } });
+        setTimeout(() => transportAdapter.getPayload(config), 1000);
     }
     function camelizeKeys(item) {
         return deepCamelizeKeys_1.default(item, key => uuid_1.validate(key));
     }
     const tGetPayload = lodash_1.default.throttle(getPayload, 10000);
-    function dispatchPayload() {
-        // We want to avoid updates from server overwriting changes to local state, so if there is a queue then wait.
-        if (!serverActionQueue.fullySynced()) {
-            console.log(serverActionQueue.getData());
-            setTimeout(dispatchPayload, 100);
-            return;
-        }
-        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(camelizeKeys(payload).map(instance => instance[m])));
-            const previousSubPayload = lodash_1.default.flatten(lodash_1.default.compact(camelizeKeys(previousPayload).map(instance => instance[m])));
-            // Find IDs that were in the payload but are no longer
-            const idsToRemove = lodash_1.default.difference(previousSubPayload.map(i => i.id), subPayload.map(i => i.id));
-            dispatch({ type: `${pluralize_1.default(m)}/upsertMany`, payload: subPayload });
-            dispatch({ type: `${pluralize_1.default(m)}/removeMany`, payload: idsToRemove });
-        });
-        const idsToRemove = lodash_1.default.difference(previousPayload.map(i => i.id), payload.map(i => i.id));
-        dispatch({ type: `${pluralize_1.default(model)}/upsertMany`, payload: camelizeKeys(payload) });
-        dispatch({ type: `${pluralize_1.default(model)}/removeMany`, payload: idsToRemove });
-        previousPayload = payload;
-    }
-    function processQueue() {
-        console.log({ idx, patchQueue });
+    function processQueue(model) {
+        console.debug("processQueue", model, idx[model], patchQueue[model]);
         lastCheckAt = new Date();
-        if (patchQueue[idx]) {
-            payload = jsonpatch_1.apply_patch(payload, patchQueue[idx]);
-            if (patchQueue[idx]) {
-                dispatchPayload();
+        if (patchQueue[model][idx[model]]) {
+            if (!serverActionQueue.fullySynced()) {
+                console.debug(serverActionQueue.getData());
+                setTimeout(() => processQueue(model), 100);
+                return;
+            }
+            const { payload, destroy, id, type } = patchQueue[model][idx[model]];
+            if (type === 'payload') {
+                dispatch({ type: `${pluralize_1.default(model)}/upsertMany`, payload });
+                const ids = payload.map(instance => instance.id);
+                dispatch({ type: `jasonModels/setSubscriptionIds`, payload: { model, subscriptionId, ids } });
             }
-            delete patchQueue[idx];
-            idx++;
+            else if (destroy) {
+                // Middleware will determine if this model should be removed if it isn't in any other subscriptions
+                dispatch({ type: `jasonModels/removeSubscriptionId`, payload: { model, subscriptionId, id } });
+            }
+            else {
+                dispatch({ type: `${pluralize_1.default(model)}/upsert`, payload });
+                dispatch({ type: `jasonModels/addSubscriptionId`, payload: { model, subscriptionId, id } });
+            }
+            delete patchQueue[model][idx[model]];
+            idx[model]++;
             updateDeadline = null;
-            processQueue();
+            processQueue(model);
             // 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) {
+        else if (lodash_1.default.keys(patchQueue[model]).length > 0 && !updateDeadline) {
             var t = new Date();
             t.setSeconds(t.getSeconds() + 3);
             updateDeadline = t;
-            setTimeout(processQueue, 3100);
+            setTimeout(() => processQueue(model), 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)) {
+        else if (lodash_1.default.keys(patchQueue[model]).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 });
+        const { idx: newIdx, model: snake_model, type } = data;
+        const model = lodash_1.default.camelCase(snake_model);
+        idx[model] = idx[model] || 0;
+        patchQueue[model] = patchQueue[model] || {};
         if (type === 'payload') {
-            if (!value)
-                return null;
-            payload = value;
-            dispatchPayload();
-            idx = newIdx + 1;
+            idx[model] = newIdx;
             // 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[model] = lodash_1.default.pick(patchQueue[model], lodash_1.default.keys(patchQueue[model]).filter(k => k > newIdx + 1));
         }
-        patchQueue[newIdx] = diff;
-        processQueue();
+        patchQueue[model][newIdx] = camelizeKeys(Object.assign(Object.assign({}, data), { model }));
+        console.debug("Added to queue", model, idx[model], camelizeKeys(Object.assign(Object.assign({}, data), { model })), serverActionQueue.getData());
+        processQueue(model);
         if (diffSeconds((new Date()), lastCheckAt) >= 3) {
             lastCheckAt = new Date();
-            console.log('Interval lost. Pulling from server');
+            console.debug('Interval lost. Pulling from server');
             tGetPayload();
         }
     }
-    return handlePayload;
+    tGetPayload();
+    // Clean up after ourselves
+    function tearDown() {
+        dispatch({ type: `jasonModels/removeSubscription`, payload: { subscriptionId } });
+    }
+    return { handlePayload, tearDown };
 }
 exports.default = createPayloadHandler;

data/client/lib/createServerActionQueue.d.ts

@@ -0,0 +1,10 @@
+export default function createServerActionQueue(): {
+    addItem: (item: any) => void;
+    getItem: () => any;
+    itemProcessed: () => boolean;
+    fullySynced: () => boolean;
+    getData: () => {
+        queue: any[];
+        inFlight: boolean;
+    };
+};

data/client/lib/createServerActionQueue.js

@@ -0,0 +1,48 @@
+"use strict";
+// A FIFO queue with deduping of actions whose effect will be cancelled by later actions
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+function createServerActionQueue() {
+    const queue = [];
+    let inFlight = false;
+    function addItem(item) {
+        // Check if there are any items ahead in the queue that this item would effectively overwrite.
+        // In that case we can remove them
+        // If this is an upsert && item ID is the same && current item attributes are a superset of the earlier item attributes
+        const { type, payload } = item;
+        if (type.split('/')[1] !== 'upsert') {
+            queue.push(item);
+            return;
+        }
+        lodash_1.default.remove(queue, item => {
+            const { type: itemType, payload: itemPayload } = item;
+            if (type !== itemType)
+                return false;
+            if (itemPayload.id !== payload.id)
+                return false;
+            // Check that all keys of itemPayload are in payload.
+            return lodash_1.default.difference(lodash_1.default.keys(itemPayload), lodash_1.default.keys(payload)).length === 0;
+        });
+        queue.push(item);
+    }
+    return {
+        addItem,
+        getItem: () => {
+            if (inFlight)
+                return false;
+            const item = queue.shift();
+            if (item) {
+                inFlight = true;
+                return item;
+            }
+            return false;
+        },
+        itemProcessed: () => inFlight = false,
+        fullySynced: () => queue.length === 0 && !inFlight,
+        getData: () => ({ queue, inFlight })
+    };
+}
+exports.default = createServerActionQueue;

data/client/lib/createServerActionQueue.test.d.ts

@@ -0,0 +1 @@
+export {};

data/client/lib/createServerActionQueue.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const createServerActionQueue_1 = __importDefault(require("./createServerActionQueue"));
+test('Adding items', () => {
+    const serverActionQueue = createServerActionQueue_1.default();
+    serverActionQueue.addItem({ type: 'entity/add', payload: { id: 'abc', attribute: 1 } });
+    const item = serverActionQueue.getItem();
+    expect(item).toStrictEqual({ type: 'entity/add', payload: { id: 'abc', attribute: 1 } });
+});
+test('Deduping of items that will overwrite each other', () => {
+    const serverActionQueue = createServerActionQueue_1.default();
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } });
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 2 } });
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 3 } });
+    const item = serverActionQueue.getItem();
+    expect(item).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute: 3 } });
+});
+test('Deduping of items with a superset', () => {
+    const serverActionQueue = createServerActionQueue_1.default();
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } });
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 2, attribute2: 'test' } });
+    const item = serverActionQueue.getItem();
+    expect(item).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute: 2, attribute2: 'test' } });
+});
+test("doesn't dedupe items with some attributes missing", () => {
+    const serverActionQueue = createServerActionQueue_1.default();
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } });
+    serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute2: 'test' } });
+    const item = serverActionQueue.getItem();
+    serverActionQueue.itemProcessed();
+    const item2 = serverActionQueue.getItem();
+    expect(item).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } });
+    expect(item2).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute2: 'test' } });
+});