From 06f155490a7bc4bf49633dad4dca299eb0039fcb Mon Sep 17 00:00:00 2001 From: Chris Smothers Date: Mon, 9 Nov 2020 21:35:31 -0500 Subject: [PATCH 1/3] Reduce bundle size - Reduce bundle by compiling with release flag and fixing advanced compilation errors - A bit of code organization around npm builds --- .github/workflows/ci.yml | 2 +- .gitignore | 1 + CHANGELOG.md | 4 ++++ README.md | 8 +++---- js/tests/benchmarks.test.js | 2 +- package.json | 48 +++++++++++++++++++++++-------------- shadow-cljs.edn | 12 +++++----- src/homebase/js.cljs | 12 +++++----- src/homebase/react.cljs | 21 ++++++++-------- 9 files changed, 64 insertions(+), 46 deletions(-) create mode 100644 CHANGELOG.md diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8acff9a2..1281f7a8 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -46,7 +46,7 @@ jobs: - run: yarn install --frozen-lockfile - - run: yarn shadow-cljs compile npm-dist + - run: yarn shadow-cljs compile npm - run: yarn shadow-cljs compile test - run: node out/node-tests.js diff --git a/.gitignore b/.gitignore index f49c7187..06bacfeb 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ dist/ /src/js_gen/tests package-lock.json +report.html pom.xml pom.xml.asc *.iml diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..4a978e7b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,4 @@ +## v0.0.1 +- React component to provide a declarative relational DB with minimal fuss. +- React hooks for transact, query and find one entity. +- Make Datascript's syntax more JS and React friendly. \ No newline at end of file diff --git a/README.md b/README.md index 94a780bf..0cdf91f3 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # Homebase React [![CI](https://github.com/homebaseio/homebase-react/workflows/CI/badge.svg)](https://github.com/homebaseio/homebase-react/actions?query=workflow%3ACI) -[![NPM Version](https://badge.fury.io/js/homebase-react.svg)](https://badge.fury.io/js/homebase-react) +[![NPM Version](https://img.shields.io/npm/v/homebase-react)](https://www.npmjs.com/package/homebase-react) +[![Bundle Size](https://img.shields.io/bundlephobia/minzip/homebase-react)](https://www.npmjs.com/package/homebase-react) [![License](https://img.shields.io/github/license/homebaseio/homebase-react.svg)](LICENSE) - -> The graph database for delightful React state management +*The graph database for delightful React state management* ## Installation @@ -154,7 +154,7 @@ todos ```bash yarn install -yarn shadow-cljs watch :dev +yarn dev ``` Open http://localhost:3000 diff --git a/js/tests/benchmarks.test.js b/js/tests/benchmarks.test.js index 3d71316a..3ec10f5a 100644 --- a/js/tests/benchmarks.test.js +++ b/js/tests/benchmarks.test.js @@ -3,7 +3,7 @@ import React from 'react'; import Enzyme, { mount } from 'enzyme'; import Benchmark from 'react-component-benchmark'; import Adapter from "enzyme-adapter-react-16"; -import { HomebaseProvider, useTransact, useEntity } from '../../dist/homebase.react'; +import { HomebaseProvider, useTransact, useEntity } from '../../dist/js/homebase.react'; const config = { initialData: [{ diff --git a/package.json b/package.json index 4ad36f54..9638c90d 100644 --- a/package.json +++ b/package.json @@ -4,18 +4,19 @@ "version": "0.0.1", "license": "MIT", "homepage": "https://github.com/homebaseio/homebase-react", - "repository": { - "type": "git", - "url": "git+https://github.com/homebaseio/homebase-react.git" + "main": "./dist/js/homebase.react.js", + "scripts": { + "dev": "shadow-cljs watch dev", + "build": "rm -rf dist && shadow-cljs release npm", + "build:dev": "rm -rf dist && shadow-cljs compile npm", + "test:js": "yarn build && jest js/tests", + "test:cljs": "shadow-cljs compile test && node out/node-tests.js", + "test": "yarn test:cljs && yarn test:js", + "report": "rm -rf dist && shadow-cljs run shadow.cljs.build-report npm report.html" + }, + "dependencies": { + "react": "16.14.0" }, - "keywords": [ - "react", - "database", - "datalog", - "state", - "graph" - ], - "main": "./dist/homebase.react.js", "devDependencies": { "@babel/cli": "7.11.6", "@babel/core": "7.11.6", @@ -28,19 +29,30 @@ "highlight.js": "10.2.1", "jest": "26.6.0", "marked": "1.2.0", - "react": "16.14.0", "react-component-benchmark": "0.0.4", "react-dom": "16.14.0", "shadow-cljs": "2.11.4" }, - "dependencies": {}, + "keywords": [ + "react", + "relational", + "database", + "datalog", + "state", + "graph" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/homebaseio/homebase-react.git" + }, "bugs": { "url": "https://github.com/homebaseio/homebase-react/issues" }, - "scripts": { - "test-js": "shadow-cljs compile npm-dist && jest js/tests", - "test-cljs": "shadow-cljs compile test && node out/node-tests.js", - "test": "yarn test-cljs && yarn test-js" + "publishConfig": { + "registry": "https://npm.pkg.github.com/" }, - "author": "" + "author": "Chris Smothers (https://homebase.io)", + "contributors": [ + "JB Rubinovitz (https://homebase.io)" + ] } diff --git a/shadow-cljs.edn b/shadow-cljs.edn index 42208db0..ab1ee824 100644 --- a/shadow-cljs.edn +++ b/shadow-cljs.edn @@ -23,9 +23,9 @@ :output-to "out/node-tests.js" :ns-regexp "-test$" :autorun false} - :npm-dist {:target :npm-module - :output-dir "dist" - :output-to "dist/lib.js" - :entries [homebase.react] - :compiler-options {:optimizations :advanced - :source-map false}}}} + :npm {:target :npm-module + :output-dir "dist/js" + :entries [homebase.react] + :compiler-options {:optimizations :advanced + :output-wrapper false + :source-map false}}}} diff --git a/src/homebase/js.cljs b/src/homebase/js.cljs index 233c356a..3e5dbebb 100644 --- a/src/homebase/js.cljs +++ b/src/homebase/js.cljs @@ -169,7 +169,7 @@ (defn humanize-transact-error [error] - (condp re-find (.-message error) + (condp re-find (goog.object/get error "message") #"\[object Object\] is not ISeqable" "Expected an array of transactions. \nFor example: transact([ @@ -192,7 +192,7 @@ "Expected a numerical id. \nFor example: transact([['retractEntity', 123]]) " - (.-message error))) + (goog.object/get error "message"))) (defn transact! [conn txs] (try @@ -202,12 +202,12 @@ (defn humanize-entity-error [error] - (condp re-find (.-message error) + (condp re-find (goog.object/get error "message") #"Lookup ref attribute should be marked as :db/unique: \[:([\w-]+)/([\w-]+) ((?!\]).+)\]" :>> (fn [[_ nmspc attr v]] (str "The `" nmspc "." attr "` attribute should be marked as unique if you want to lookup entities by it." "\n\nAdd this to your config: { schema: { " nmspc ": { " attr ": { unique: 'identity' }}}\n")) - (.-message error))) + (goog.object/get error "message"))) (defn entity [conn lookup] (try @@ -226,7 +226,7 @@ For example: query({ "))) (defn humanize-q-error [error] - (condp re-find (.-message error) + (condp re-find (goog.object/get error "message") #"Query should be a vector or a map" (str "Expected query to be in the form of an object or datalog string." (example-js-query)) @@ -245,7 +245,7 @@ For example: query({ :>> (fn [[_ v]] (str "Expected $where clause to be a nested object, not " v "." (example-js-query))) - (.-message error))) + (goog.object/get error "message"))) (defn q [query conn & args] (try diff --git a/src/homebase/react.cljs b/src/homebase/react.cljs index ba28f29b..15d6ca40 100644 --- a/src/homebase/react.cljs +++ b/src/homebase/react.cljs @@ -10,26 +10,27 @@ (catch js/Error e (throw (js/Error - (str (.-message e) "\n" - (some->> (.-stack e) + (str (goog.object/get e "message") "\n" + (some->> (goog.object/get e "stack") (re-find (re-pattern (str hook-name ".*\\n(.*)\\n?"))) (second) (clojure.string/trim)))))))) -(defonce homebase-context (react/createContext)) +(defonce ^:export homebase-context (react/createContext)) (def base-schema {:db/ident {:db/unique :db.unique/identity}}) (defn ^:export HomebaseProvider [props] - (let [config (.-config props) - conn (d/create-conn (if (.-schema config) - (merge (hbjs/js->schema (.-schema config)) base-schema) + (let [conn (d/create-conn (if-let [schema (goog.object/getValueByKeys props #js ["config" "schema"])] + (merge (hbjs/js->schema schema) base-schema) base-schema))] - (when (.-initialData config) (hbjs/transact! conn (.-initialData config))) + (when-let [tx (goog.object/getValueByKeys props #js ["config" "initialData"])] + (hbjs/transact! conn tx)) (react/createElement - (.-Provider homebase-context) #js {:value conn} - (.-children props)))) + (goog.object/get homebase-context "Provider") + #js {:value conn} + (goog.object/get props "children")))) (defn ^:export useEntity [lookup] (let [conn (react/useContext homebase-context) @@ -58,4 +59,4 @@ (defn ^:export useTransact [] (let [conn (react/useContext homebase-context) transact (fn transact [txs] (try-hook "useTransact" #(hbjs/transact! conn txs)))] - [transact])) + [transact])) \ No newline at end of file From cdee6e5eb74146e3bf32900578ce453c8d75cb70 Mon Sep 17 00:00:00 2001 From: Chris Smothers Date: Tue, 10 Nov 2020 08:40:53 -0500 Subject: [PATCH 2/3] Test the release build in CI --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1281f7a8..0a5882f6 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -46,7 +46,7 @@ jobs: - run: yarn install --frozen-lockfile - - run: yarn shadow-cljs compile npm + - run: yarn shadow-cljs release npm - run: yarn shadow-cljs compile test - run: node out/node-tests.js From 662b508e070788009f7f0f21fe7db80b9ec54911 Mon Sep 17 00:00:00 2001 From: Chris Smothers Date: Tue, 10 Nov 2020 08:54:41 -0500 Subject: [PATCH 3/3] Add .npmignore --- .npmignore | 26 ++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 28 insertions(+) create mode 100644 .npmignore diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..85a395a0 --- /dev/null +++ b/.npmignore @@ -0,0 +1,26 @@ +node_modules/ +public/js +out/ + +/target +/checkouts +/src/gen +/src/js_gen/tests + +package-lock.json +report.html +pom.xml +pom.xml.asc +*.iml +*.jar +*.log +*.orig +.shadow-cljs +.idea +.lein-* +.nrepl-* +.DS_Store +.calva + +.hgignore +.hg/ diff --git a/package.json b/package.json index 9638c90d..2bb96780 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "build": "rm -rf dist && shadow-cljs release npm", "build:dev": "rm -rf dist && shadow-cljs compile npm", "test:js": "yarn build && jest js/tests", + "test:js:dev": "yarn build:dev && jest js/tests", "test:cljs": "shadow-cljs compile test && node out/node-tests.js", "test": "yarn test:cljs && yarn test:js", + "test:dev": "yarn test:cljs && yarn test:js:dev", "report": "rm -rf dist && shadow-cljs run shadow.cljs.build-report npm report.html" }, "dependencies": {