Migrate content from monorepo

Author: captainsafia

Diff for: .gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Remove built assets
+lib/

Diff for: README.md

@@ -0,0 +1,42 @@
+# @nteract/actions
+
+This package contains two main components, `<MathJax.Context>` and `<MathJax.Node>`. The `<MathJax.Context>` component loads MathJax and makes it available to children elements via the React Context API. `<MathJax.Node>` takes raw text for rendering and uses MathJax to render formatted math.
+
+## Installation
+
+```
+$ yarn add @nteract/mathjax
+```
+
+```
+$ npm install --save @nteract/mathjax
+```
+
+## Usage
+
+The Redux reducer below shows how we can leverage the actions and action types in this package to create a reducer for managing the status of a save event.
+
+```javascript
+import MathJax from "@nteract/mathjax";
+
+export default text => {
+  return (
+    <MathJax.Context>
+      <MathJax.Node>{`x^2 + y^2 = z^2`}</MathJax.Node>
+      <MathJax.Node>{text}</MathJax.Node>
+    </MathJax.Context>
+  );
+};
+```
+
+## Documentation
+
+You can view the reference documentation for `@nteract/mathjax` in the the [examples documentation](./examples.md).
+
+## Support
+
+If you experience an issue while using this package or have a feature request, please file an issue on the [issue board](https://github.com/nteract/mathjax/issues/new/choose).
+
+## License
+
+[BSD-3-Clause](https://choosealicense.com/licenses/bsd-3-clause/)

Diff for: __tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MathJax Node can be renderered without provider 1`] = `
+<MathJaxNode
+  inline={false}
+  onRender={null}
+>
+  <Provider
+    delay={0}
+    didFinishTypeset={null}
+    input="tex"
+    loading={null}
+    noGate={false}
+    onError={[Function]}
+    onLoad={null}
+    options={Object {}}
+    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"
+  >
+    <MathJaxNode
+      inline={false}
+      onRender={null}
+    />
+  </Provider>
+</MathJaxNode>
+`;
+
+exports[`MathJax Nodes use existing provider 1`] = `
+<Provider
+  delay={0}
+  didFinishTypeset={null}
+  input="tex"
+  loading={null}
+  noGate={false}
+  onError={[Function]}
+  onLoad={null}
+  options={Object {}}
+  src="script-src"
+>
+  <MathJaxNode
+    inline={false}
+    onRender={null}
+  />
+  <MathJaxNode
+    inline={false}
+    onRender={null}
+  />
+</Provider>
+`;
+
+exports[`MathJax Text node renders LaTeX text 1`] = `
+<MathJaxText
+  onRender={null}
+>
+  <Provider
+    delay={0}
+    didFinishTypeset={null}
+    input="tex"
+    loading={null}
+    noGate={false}
+    onError={[Function]}
+    onLoad={null}
+    options={Object {}}
+    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"
+  >
+    <MathJaxText
+      onRender={null}
+    />
+  </Provider>
+</MathJaxText>
+`;

Diff for: __tests__/index.spec.tsx

@@ -0,0 +1,44 @@
+import { mount } from "enzyme";
+import toJson from "enzyme-to-json";
+import * as React from "react";
+
+jest.mock("load-script");
+import loadScript from "load-script";
+import { Node, Provider, Text } from "../src";
+
+const mathJaxUrl =
+  "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML";
+
+describe("MathJax", () => {
+  test("Node can be renderered without provider", () => {
+    const wrapper = mount(<Node>x^2 + y = 3</Node>);
+    expect(loadScript).toHaveBeenLastCalledWith(
+      mathJaxUrl,
+      expect.any(Function)
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test("Nodes use existing provider", () => {
+    const wrapper = mount(
+      <Provider src="script-src">
+        <Node>x^2 + y = 3</Node>
+        <Node>x^3 + y = 2</Node>
+      </Provider>
+    );
+    expect(loadScript).toHaveBeenLastCalledWith(
+      "script-src",
+      expect.any(Function)
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test("Text node renders LaTeX text", () => {
+    const wrapper = mount(<Text>This is a LaTeX equation $x^2 + y = 3$</Text>);
+    expect(loadScript).toHaveBeenLastCalledWith(
+      mathJaxUrl,
+      expect.any(Function)
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

Diff for: __tests__/node.spec.tsx

@@ -0,0 +1,59 @@
+import { mount } from "enzyme";
+import React from "react";
+
+import { MathJaxNode_ } from "../src/node";
+
+jest.useFakeTimers();
+
+const MathJaxContextMock = {
+  Hub: {
+    Register: {
+      StartupHook: (str: string, cb: () => void) => {},
+      MessageHook: (str: string, cb: (msg: string) => void) => {}
+    },
+    processSectionDelay: 20,
+    getJaxFor: (node: HTMLElement) => ({ Remove: jest.fn() }),
+    Config: (options: object) => {},
+    Queue: (elements: any[], onRender?: () => void) => {}
+  }
+};
+
+describe("MathJaxNode_", () => {
+  it("typesets when mounted", () => {
+    const typeset = jest.spyOn(MathJaxNode_.prototype, "typeset");
+    const component = mount(
+      <MathJaxNode_ inline MathJax={MathJaxContextMock} input={"tex"}>
+        $x^2 + y = 3$
+      </MathJaxNode_>
+    );
+    jest.runAllTimers();
+    component.update();
+
+    expect(typeset).toBeCalled();
+  });
+  it("clears typesetting when unmounted", () => {
+    const clear = jest.spyOn(MathJaxNode_.prototype, "clear");
+    const component = mount(
+      <MathJaxNode_ inline MathJax={MathJaxContextMock} input={"tex"}>
+        $x^2 + y = 3$
+      </MathJaxNode_>
+    );
+    jest.runAllTimers();
+    component.update();
+    component.unmount();
+
+    expect(clear).toBeCalled();
+  });
+  it("typesets with force update when props change", () => {
+    const typeset = jest.spyOn(MathJaxNode_.prototype, "typeset");
+    const component = mount(
+      <MathJaxNode_ inline MathJax={MathJaxContextMock} input="tex">
+        $x^2 + y = 3$
+      </MathJaxNode_>
+    );
+    jest.runAllTimers();
+    component.setProps({ inline: false });
+
+    expect(typeset).toBeCalledWith(true);
+  });
+});

Diff for: __tests__/provider.spec.tsx

@@ -0,0 +1,12 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import MathJaxContext from "../src/context";
+import MathJaxProvider from "../src/provider";
+
+describe("MathJaxProvider", () => {
+  it("renders without crashing", () => {
+    const component = shallow(<MathJaxProvider>$x^2 + y = 3$</MathJaxProvider>);
+    expect(component.find(MathJaxContext.Provider)).toHaveLength(1);
+  });
+});

Diff for: __tests__/text.spec.tsx

@@ -0,0 +1,42 @@
+import { mount } from "enzyme";
+import React from "react";
+
+import { MathJaxText_ } from "../src/text";
+
+const MathJaxContextMock = {
+  Hub: {
+    Register: {
+      StartupHook: (str: string, cb: () => void) => {},
+      MessageHook: (str: string, cb: (msg: string) => void) => {}
+    },
+    processSectionDelay: 20,
+    getJaxFor: (node: HTMLElement) => ({ Remove: jest.fn() }),
+    Config: (options: object) => {},
+    Queue: (elements: any[], onRender?: () => void) => {}
+  }
+};
+
+describe("MathJaxText_", () => {
+  it("typesets when mounted", () => {
+    const typeset = jest.spyOn(MathJaxText_.prototype, "typeset");
+    const component = mount(
+      <MathJaxText_ MathJax={MathJaxContextMock} input={"tex"}>
+        $x^2 + y = 3$
+      </MathJaxText_>
+    );
+
+    expect(typeset).toBeCalled();
+  });
+  it("typesets on component update", () => {
+    const typeset = jest.spyOn(MathJaxText_.prototype, "typeset");
+    const component = mount(
+      <MathJaxText_ MathJax={MathJaxContextMock} input={"tex"}>
+        $x^2 + y = 3$
+      </MathJaxText_>
+    );
+    jest.runAllTimers();
+    component.update();
+
+    expect(typeset).toBeCalledTimes(2);
+  });
+});

Diff for: examples.md

@@ -0,0 +1,92 @@
+The MathJax component provides a way to both load MathJax on the page and render MathJax Nodes. Many people love ❤️ beautifully typeset mathematics, and these components are the way to provide it.
+
+```jsx
+const { Provider, Node } = require("@nteract/mathjax");
+
+const tex = String.raw`f(x) = \int_{-\infty}^\infty
+    \hat f(\xi)\,e^{2 \pi i \xi x}
+    \,d\xi`;
+
+<Provider>
+  <p>
+    This is an inline math formula: <Node inline>a = b</Node>
+    <span> and a block one:</span>
+    <Node>{tex}</Node>
+  </p>
+</Provider>;
+```
+
+The components are written in a React 16+ way to both load mathjax through a `<Provider />` and render individual MathJax nodes with `<Node />`. React does the heavy lifting of knowing what changed and the `<Node>` component triggers having MathJax do what it's good at — _typesetting mathematics_!
+
+This semi-contrived example shows
+
+```jsx
+const { Provider, Node } = require("@nteract/mathjax");
+
+const verbs = ["do", "can", "should", "will"];
+
+class CleanUpdates extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      exponent: 1,
+      verb: "can"
+    };
+  }
+
+  componentDidMount() {
+    this.intervals = [
+      setInterval(() => {
+        this.setState(state => ({
+          exponent: (state.exponent + 1) % 10
+        }));
+      }, 3001), // Prime
+
+      setInterval(() => {
+        this.setState(state => ({
+          verb: verbs[Math.floor(Math.random() * verbs.length)]
+        }));
+      }, 557) // Also prime
+    ];
+  }
+
+  componentWillUnmount() {
+    this.intervals.map(id => clearInterval(id));
+  }
+
+  render() {
+    return (
+      <Provider options={{ messageStyle: "none" }}>
+        <p>
+          We{" "}
+          <span
+            style={{
+              backgroundColor: "#7ee77e",
+              padding: "5px",
+              margin: "5px",
+              width: "42px",
+              display: "inline-block",
+              textAlign: "center"
+            }}
+          >
+            {this.state.verb}
+          </span>{" "}
+          update
+          <Node inline>{"n^" + this.state.exponent}</Node> pieces of a paragraph
+          without triggering a MathJax re-render.
+        </p>
+      </Provider>
+    );
+  }
+}
+
+<CleanUpdates />;
+```
+
+If you use `<Node />` with no provider, a `<Provider />` is created for you automatically.
+
+```jsx
+const { Node } = require("@nteract/mathjax");
+
+<Node>a = b</Node>;
+```

Diff for: jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  timers: "fake",
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest"
+  },
+  setupFilesAfterEnv: ["./test-setup.js"]
+};