feat(react): add renderer

vivliostyle · Jun 22, 2020 · 3eb027b · 3eb027b
1 parent bc9463a
commit 3eb027b
Show file tree

Hide file tree

Showing 21 changed files with 13,081 additions and 0 deletions.
diff --git a/packages/react/.gitignore b/packages/react/.gitignore
@@ -0,0 +1,22 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -0,0 +1,29 @@
+# Vivliostyle Viewer for React
+
+[![NPM](https://img.shields.io/npm/v/@vivliostyle/react.svg)](https://www.npmjs.com/package/@vivliostyle/react)
+
+## Install
+
+```bash
+yarn add @vivliostyle/react
+```
+
+## Usage
+
+```tsx
+import React from "react";
+
+import { Renderer } from "@vivliostyle/react";
+import "@vivliostyle/react/dist/index.css";
+
+function App() {
+  const sample =
+    "https://vivliostyle.github.io/vivliostyle_doc/samples/gon/index.html";
+
+  return <Renderer entrypoint={sample} />;
+}
+```
+
+## License
+
+MIT © [uetchy](https://github.com/uetchy)
diff --git a/packages/react/example/README.md b/packages/react/example/README.md
@@ -0,0 +1,5 @@
+This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+It is linked to the react-vivliostyle-viewer package in the parent directory for development purposes.
+
+You can run `yarn install` and then `yarn start` to test your package.
diff --git a/packages/react/example/package.json b/packages/react/example/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "react-vivliostyle-viewer-example",
+  "homepage": "https://uetchy.github.io/react-vivliostyle-viewer",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "react-scripts": "link:../node_modules/react-scripts",
+    "@vivliostyle/react": "link:.."
+  },
+  "scripts": {
+    "start": "node ../../../node_modules/react-scripts/bin/react-scripts.js start",
+    "build": "node ../../../node_modules/react-scripts/bin/react-scripts.js build",
+    "test": "node ../../../node_modules/react-scripts/bin/react-scripts.js test",
+    "eject": "node ../../../node_modules/react-scripts/bin/react-scripts.js eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/react/example/public/index.html b/packages/react/example/public/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>@vivliostyle/react</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/packages/react/example/public/manifest.json b/packages/react/example/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "@vivliostyle/react",
+  "name": "@vivliostyle/react",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/packages/react/example/src/App.js b/packages/react/example/src/App.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+import { Renderer } from "@vivliostyle/react";
+import "@vivliostyle/react/dist/index.css";
+
+const App = () => {
+  return (
+    <Renderer entrypoint="https://vivliostyle.github.io/vivliostyle_doc/samples/gon/index.html" />
+  );
+};
+
+export default App;
diff --git a/packages/react/example/src/App.test.js b/packages/react/example/src/App.test.js
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/packages/react/example/src/index.css b/packages/react/example/src/index.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/packages/react/example/src/index.js b/packages/react/example/src/index.js
@@ -0,0 +1,7 @@
+import "./index.css";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/packages/react/example/yarn.lock b/packages/react/example/yarn.lock
@@ -0,0 +1,80 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@vivliostyle/core@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@vivliostyle/core/-/core-2.0.0.tgz#a2aa5915c7bd89580d53dcdc5ef6bbccfe8fbff4"
+  integrity sha512-rUMKNPmNiucFQ9HhQEOJ9FhA+xOScJFxlkLvPPpHHMoP4zigXK5ebzb8g4NihpxasY5KzZfJki4q//8rn8uI4Q==
+
+"@vivliostyle/react@link:..":
+  version "0.0.0"
+  uid ""
+
+"@vivliostyle/viewer@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@vivliostyle/viewer/-/viewer-2.0.0.tgz#88fc1d0fb41e2fa18977ea5dd618ea5ebba71dbd"
+  integrity sha512-ksqpzLvmdcHhsn8iI80NqsreSRgnjUdVFP8zzQVDP1IHeL8D+T9MJTCHE6sZ6zg2N2p2O7A3tyq46JRorhmsqA==
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+"react-dom@link:../node_modules/react-dom":
+  version "0.0.0"
+  uid ""
+
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
+react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+"react-scripts@link:../node_modules/react-scripts":
+  version "0.0.0"
+  uid ""
+
+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
+"react@link:../node_modules/react":
+  version "0.0.0"
+  uid ""
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@vivliostyle/react",
+  "description": "React component for Vivliostyle",
+  "version": "0.0.0",
+  "author": "Yasuaki Uechi <y@uechi.io>",
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "deploy": "gh-pages -d example/build",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "prepublish": "run-s build",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom"
+  },
+  "dependencies": {
+    "@vivliostyle/core": "^2.0.0",
+    "@vivliostyle/viewer": "^2.0.0",
+    "react-helmet": "^6.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.27",
+    "@types/react-helmet": "^6.0.0",
+    "cross-env": "^7.0.2",
+    "gh-pages": "^3.0.0",
+    "microbundle-crl": "^0.13.8",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/vivliostyle/vivliostyle.js.git",
+    "directory": "packages/react"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=10"
+  },
+  "source": "src/index.tsx"
+}
diff --git a/packages/react/src/index.test.tsx b/packages/react/src/index.test.tsx
@@ -0,0 +1,7 @@
+import { ExampleComponent } from ".";
+
+describe("ExampleComponent", () => {
+  it("is truthy", () => {
+    expect(ExampleComponent).toBeTruthy();
+  });
+});
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+export { Renderer } from "./renderer";
+
+interface Props {
+  text: string;
+}
+
+export const ExampleComponent = ({ text }: Props) => {
+  return <div className={styles.test}>Example Component: {text}</div>;
+};