Merge pull request #39 from curvenote/format

🎨 Prettier
curvenote · Jun 26, 2021 · 5b4de3e · 5b4de3e
2 parents d277b08 + fe70413
commit 5b4de3e
Show file tree

Hide file tree

Showing 27 changed files with 2,514 additions and 3,002 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,43 +1,35 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "node": true
-    },
-    "extends": [
-        "airbnb-typescript",
-        "eslint:recommended",
-        "plugin:jest/recommended"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": 2018,
-        "sourceType": "module",
-        "project": [
-            "./tsconfig.json"
-        ]
-    },
-    "ignorePatterns": [
-        "webpack.*"
-    ],
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
-        "import/prefer-default-export": "off"
-    },
-    "settings": {
-        "import/resolver": {
-            "node": {
-                "extensions": [
-                    ".js",
-                    ".ts"
-                ]
-            }
-        }
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "airbnb-typescript",
+    "eslint:recommended",
+    "plugin:jest/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": ["./tsconfig.json"]
+  },
+  "ignorePatterns": ["webpack.*"],
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "import/prefer-default-export": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts"]
+      }
     }
+  }
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches: [main, ci-*]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - uses: actions/cache@v2
+        with:
+          path: 'node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+      - name: install
+        run: yarn install
+      - name: lint
+        run: yarn run lint
+      - name: format
+        run: yarn run lint:format
diff --git a/.github/workflows/lint_and_unittests.yml b/.github/workflows/lint_and_unittests.yml
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100
+}
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Iooxa Inc.
+Copyright (c) 2021 Iooxa Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ The goal of `@curvenote/article` is to provide web-components for interactive sc
 
 The [curvenote/article](https://curvenote.dev/article) project is heavily inspired by [tangle.js](http://worrydream.com/Tangle/guide.html), re-imagined to use [web-components](https://www.webcomponents.org/)!
 This means you can declaratively write your variables and how to display them in `html` markup.
-To get an idea of what that looks like, let's take the canonical example of *Tangled Cookies* - a simple reactive document.
+To get an idea of what that looks like, let's take the canonical example of _Tangled Cookies_ - a simple reactive document.
 
 ![How many calories in that cookie?](images/tangle.gif)
 
@@ -23,8 +23,8 @@ To get an idea of what that looks like, let's take the canonical example of *Tan
 <r-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></r-var>
 
 <p>
-  When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>,
-  you consume <r-display bind="calories"></r-display> calories.<br>
+  When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>, you consume
+  <r-display bind="calories"></r-display> calories.<br />
   That's <r-display bind="dailyPercent"></r-display> of your recommended daily calories.
 </p>
 ```
@@ -35,7 +35,7 @@ To get an idea of what that looks like, let's take the canonical example of *Tan
 To get started, copy the built javascript file to the head of your page:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@curvenote/article/dist/curvenote.css">
+<link rel="stylesheet" href="https://unpkg.com/@curvenote/article/dist/curvenote.css" />
 <script async src="https://unpkg.com/@curvenote/article"></script>
 ```
 

diff --git a/curvenote.ts b/curvenote.ts
@@ -20,11 +20,7 @@ declare global {
 
 const store = createStore(
   combineReducers({ runtime: runtime.reducer }),
-  applyMiddleware(
-    thunkMiddleware,
-    runtime.triggerEvaluate,
-    runtime.dangerousEvaluatation,
-  ),
+  applyMiddleware(thunkMiddleware, runtime.triggerEvaluate, runtime.dangerousEvaluatation),
 ) as types.Store;
 
 function getVariableByName(name: string) {

diff --git a/package.json b/package.json
@@ -29,6 +29,8 @@
   "scripts": {
     "test": "jest",
     "lint": "eslint \"src/**/*.ts\" -c .eslintrc.json",
+    "lint:format": "prettier --check \"src/**/*\" \"styles/**/*\"",
+    "lint:format:fix": "prettier --write \"src/**/*\" \"styles/**/*\"",
     "start": "yarn run build-css; webpack serve  --config webpack.dev.js",
     "clean": "rm -rf dist || true; rm -f styles/index.css*;",
     "link": "yarn unlink; yarn link; yarn link @curvenote/runtime;yarn link @curvenote/components;yarn link @curvenote/svg",
@@ -41,48 +43,51 @@
     "build": "yarn run build-css; webpack --config webpack.prod.js --profile --json > stats.json; tsc; rm -rf dist/src",
     "prepublishOnly": "yarn run clean; yarn run build;"
   },
+  "dependencies": {
+    "@curvenote/components": "^0.3.0",
+    "@curvenote/runtime": "^0.2.8",
+    "@curvenote/svg": "^0.0.8",
+    "copy-webpack-plugin": "^9.0.1",
+    "highlight.js": "^10.6.0",
+    "katex": "^0.13.11",
+    "redux": "^4.1.0",
+    "redux-thunk": "^2.3.0",
+    "scroll-into-view-if-needed": "^2.2.28"
+  },
   "devDependencies": {
-    "@size-limit/preset-app": "^4.9.2",
+    "@size-limit/preset-app": "^5.0.0",
     "@types/highlight.js": "^10.1.0",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^26.0.23",
     "@types/katex": "^0.11.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.0",
-    "@typescript-eslint/parser": "^4.15.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.2",
-    "eslint": "^7.20.0",
+    "css-loader": "^5.2.6",
+    "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "express": "^4.17.1",
-    "html-webpack-plugin": "^5.1.0",
-    "jest": "^26.6.3",
-    "node-sass": "^5.0.0",
-    "sass-loader": "^11.0.1",
-    "size-limit": "^4.9.2",
-    "style-loader": "^2.0.0",
-    "ts-jest": "^26.5.1",
-    "ts-loader": "^8.0.17",
-    "typescript": "^4.1.5",
-    "webpack": "^5.22.0",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.5.0",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.0.5",
+    "node-sass": "^6.0.1",
+    "prettier": "^2.3.2",
+    "sass-loader": "^12.1.0",
+    "size-limit": "^5.0.0",
+    "style-loader": "^3.0.0",
+    "ts-jest": "^27.0.3",
+    "ts-loader": "^9.2.3",
+    "typescript": "^4.3.4",
+    "webpack": "^5.40.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
-  },
-  "dependencies": {
-    "@curvenote/components": "^0.2.8",
-    "@curvenote/runtime": "^0.2.7",
-    "@curvenote/svg": "^0.0.7",
-    "copy-webpack-plugin": "^7.0.0",
-    "highlight.js": "^10.6.0",
-    "katex": "^0.12.0",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "scroll-into-view-if-needed": "^2.2.26"
+    "webpack-merge": "^5.8.0"
   },
   "sideEffects": false,
   "size-limit": [

diff --git a/src/components/article.ts b/src/components/article.ts
@@ -1,7 +1,7 @@
 import { renderHTML } from '@curvenote/components';
 import { katexCSS } from './equation';
 
-const renderMathInElement = require('katex/contrib/auto-render/auto-render.js').default;
+const renderMathInElement = require('katex/contrib/auto-render/auto-render').default;
 
 const MATH_RENDER_OPTIONS = {
   delimiters: [
@@ -18,9 +18,7 @@ export function renderMath(element: Element) {
 }
 
 export function setupNav() {
-  Array.from(
-    document.querySelectorAll('nav .section div'),
-  ).forEach((sec: Element) => {
+  Array.from(document.querySelectorAll('nav .section div')).forEach((sec: Element) => {
     sec.addEventListener('click', () => sec.parentElement?.classList.toggle('open'));
   });
 
@@ -40,8 +38,6 @@ export default function setup() {
   const katexFragment = document.createDocumentFragment();
   renderHTML(katexCSS, katexFragment);
   document.head.appendChild(katexFragment);
-  Array.from(
-    document.querySelectorAll('article'),
-  ).forEach((element) => renderMath(element));
+  Array.from(document.querySelectorAll('article')).forEach((element) => renderMath(element));
   setupNav();
 }