machinate - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

src/components/MachineConsumer.js

+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import ExternalComp from "./External";
+import { createTransitionComponent } from "../helpers";
+
+class MachineConsumer extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.persistentMethods = context.machine.scoped(context.scope, () => true);
+    const Transition = createTransitionComponent(
+      this.persistentMethods.transition
+    );
+
+    const External = ({ ...props }) => (
+      <ExternalComp
+        checkBlacklisted={context.machine.isTriggerBlacklisted}
+        {...props}
+      />
+    );
+
+    this.machineProps = { ...this.persistentMethods, Transition, External };
+  }
+  render() {
+    return this.props.children({ ...this.machineProps });
+  }
+}
+
+export default MachineConsumer;
+
+MachineConsumer.contextTypes = {
+  scope: PropTypes.array,
+  machine: PropTypes.object
+};

cypress/integration/demo-03-submachines.js

@@ -6,3 +6,3 @@ const APP_URL = "http://localhost:3001";
     cy.visit(APP_URL);
-    cy.get("[data-test='list-header']").should("have.text", "My List - All");
+    cy.get("[data-test='list-header']").should("have.text", "My List - All!");
   });
@@ -9,0 +9,0 @@ it("should toggle visibility", () => {

package.json

 {
   "name": "machinate",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "practical state management",
@@ -5,0 +5,0 @@ "main": "build/lib.js",

plugins/inspector/package.json

 {
   "name": "machinate-plugins-inspector",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "get full insight and power over your machinate-powered apps",
@@ -5,0 +5,0 @@ "main": "build/lib.js",

plugins/inspector/src/index.js

@@ -43,3 +43,7 @@ import React from "react";
     super(props);
-    this.state.appState = props.initial;
+    const machineState = props.onRequestInitialState();
+    this.state.appState = machineState;
+    this.state.transitionsList = [
+      { fromName: "", toName: "INITIAL", state: machineState }
+    ];
   }
@@ -108,3 +112,3 @@ handleMessage = message => {
   instrument = INSTRUMENT;
-  state = {};
+  state = { leftSide: false };
   postToInspector = (type, data) => {
@@ -117,2 +121,12 @@ const frame = ReactDOM.findDOMNode(this.iframe);
   };
+  toggleSide = () => {
+    this.setState({ leftSide: !this.state.leftSide });
+  };
+  handleRequestInitialState = () => {
+    const machine = this.context && this.context.machine;
+    if (window && machine) {
+      return machine.getState();
+    }
+    return null;
+  };
   componentDidMount() {
@@ -161,5 +175,6 @@ const machine = this.context && this.context.machine;
           top: "0",
-          right: "0",
+          ...(this.state.leftSide ? { left: 0 } : { right: 0 }),
           height: "100vh",
-          width: "300px" // TODO: make resizable
+          width: "300px", // TODO: make resizable
+          zIndex: 999
         }}
@@ -178,3 +193,3 @@ >
             html, body {margin:0; padding: 0; font-family: Arial, serif; }
-            body { background-color: #efefef; color: #3f3f3f; border-left: 1px solid #aaaaaa; min-height: 100vh; }
+            body { background-color: #efefef; color: #3f3f3f; border-left: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa; min-height: 100vh; }
             .container { padding: 20px 15px; font-size: 12px; }
@@ -191,3 +206,5 @@ html { height: 100vh; }
         >
-          <InspectorState initial={this.state.initialState}>
+          <InspectorState
+            onRequestInitialState={this.handleRequestInitialState}
+          >
             {({ appState, transitionsList, handleMessage }) => (
@@ -197,3 +214,6 @@ <MessageBroker onMessage={handleMessage}>
                   <div>
-                    <h1 style={{ marginTop: "0px" }}>Inspector</h1>
+                    <h1 style={{ marginTop: "0px" }}>
+                      Inspector -{" "}
+                      <span onClick={this.toggleSide}>Toggle side</span>
+                    </h1>
                     <div className="container">
@@ -200,0 +220,0 @@ <div className="module">

README.md

 # 🕵️‍♂️ machinate
 
-[![npm](https://img.shields.io/npm/v/machinate.svg)]()
+[![npm](https://img.shields.io/npm/v/machinate.svg)]() [![build](https://api.travis-ci.org/pringshia/machinate.svg?branch=master)]()
 
@@ -5,0 +5,0 @@ #### **⚠️ Not yet ready for production use.**

src/components/External.js

@@ -5,2 +5,3 @@ import { Component } from "react";
 class External extends Component {
+  // TODO: Component needs to re-render if external is updated.
   render() {
@@ -7,0 +8,0 @@ return (

src/components/State.js

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import Transition from "./Transition";
 import External from "./External";
+import { createTransitionComponent } from "../helpers";
 
@@ -20,5 +20,6 @@ class State extends Component {
     );
-    this.Transition = ({ ...props }) => (
-      <Transition transition={this.transientMethods.transition} {...props} />
+    this.Transition = createTransitionComponent(
+      this.transientMethods.transition
     );
+
     this.External = ({ ...props }) => (
@@ -25,0 +26,0 @@ <External

src/components/withMachine.js

 import React from "react";
 import PropTypes from "prop-types";
-import Transition from "./Transition";
 import External from "./External";
 import hoistStatics from "hoist-non-react-statics";
+import { createTransitionComponent } from "../helpers";
+import MachineConsumer from "./MachineConsumer";
 
 const withMachine = Component => {
-  class C extends React.Component {
-    constructor(props, context) {
-      super(props, context);
-      this.persistentMethods = context.machine.scoped(
-        context.scope,
-        () => true
-      );
-      this.Transition = ({ ...props }) => (
-        <Transition transition={this.persistentMethods.transition} {...props} />
-      );
-      this.External = ({ ...props }) => (
-        <External
-          checkBlacklisted={context.machine.isTriggerBlacklisted}
-          {...props}
-        />
-      );
-    }
-    render() {
-      const { wrappedComponentRef, ...remainingProps } = this.props;
+  const C = props => {
+    const { wrappedComponentRef, ...remainingProps } = props;
+    return (
+      <MachineConsumer>
+        {renderProps => (
+          <Component
+            ref={wrappedComponentRef}
+            {...renderProps}
+            {...remainingProps}
+          />
+        )}
+      </MachineConsumer>
+    );
+  };
 
-      return (
-        <Component
-          {...remainingProps}
-          ref={wrappedComponentRef}
-          {...this.persistentMethods}
-          Transition={this.Transition}
-          External={this.External}
-        />
-      );
-    }
-  }
-
   C.displayName = `withMachine(${Component.displayName || Component.name})`;
@@ -45,6 +29,2 @@ C.WrappedComponent = Component;
   };
-  C.contextTypes = {
-    scope: PropTypes.array,
-    machine: PropTypes.object
-  };
 
@@ -51,0 +31,0 @@ return hoistStatics(C, Component);

src/helpers.js

@@ -0,1 +1,4 @@
+import React from "react";
+import Transition from "./components/Transition";
+
 export const expandSchemeSyntax = scheme =>
@@ -103,1 +106,11 @@ Object.entries(scheme).reduce((obj, [domainName, value]) => {
 };
+
+export function createTransitionComponent(transitionMethod) {
+  return ({ noKey, ...props }) => (
+    <Transition
+      {...{ key: noKey ? undefined : props.to }}
+      transition={transitionMethod}
+      {...props}
+    />
+  );
+}

src/index.js

@@ -8,2 +8,3 @@ import Machinate from "./components/Machinate";
 import IsActive from "./components/IsActive";
+import MachineConsumer from "./components/MachineConsumer";
 
@@ -21,3 +22,4 @@ import { isTransitionable, createMachine } from "./machine";
   withState,
-  withMachine
+  withMachine,
+  MachineConsumer
 };

src/machine.js

@@ -135,5 +135,6 @@ import React from "react";
 
-    const dependentDomainsToRemove = depGraph
-      .getDependents(state, schematicFromName)
-      .map(n => n.f);
+    const dependentDomainsToRemove =
+      schematicToName === schematicFromName
+        ? [] // if there's no real transition, let's not remove dependents
+        : depGraph.getDependents(state, schematicFromName).map(n => n.f);
 
@@ -175,2 +176,3 @@ const optimizedDomainsToRemove = dependentDomainsToRemove
           obj[key] = value;
+          return obj;
         }
@@ -195,3 +197,7 @@ emitter.emit("triggered-remove", { domain: key });
       });
-      comps.forEach(comp => comp.forceUpdate());
+      comps.forEach(
+        comp =>
+          (comp.isUnmounted === undefined || comp.isUnmounted === false) &&
+          comp.forceUpdate()
+      );
     }
@@ -198,0 +204,0 @@

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2344087

0.7%

Number of package files

46

2.22%

Lines of code

27251

0.71%

Number of low supply chain risk alerts

183

-2.14%

No dependency changes