Merge pull request #5 from quantmind/ls-v2

v2

Author: lsbardel

.github/workflows/test.yml

@@ -1,35 +1,32 @@
 name: test
 
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
+on: push
 
 jobs:
   build:
     runs-on: ubuntu-latest
     env:
       METABLOCK_API_TOKEN: ${{ secrets.METABLOCK_API_TOKEN }}
-      METABLOCK_BLOCK_ID: 7ccced109e374e0ebdcb4d8bb9b8d61e
-      BUNDLE_LOCATION: example/public
+      METABLOCK_BLOCK_ID: 9f15b0a7a60e4f528e573444cc5af7e0
 
     steps:
       - name: checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: build example
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 18.x
       - name: build example
-        run: cd example && yarn && yarn build
-      - uses: quantmind/metablock-action@master
-        id: metablock-deployment-stage
-        if: github.event_name == 'pull_request'
-      - uses: quantmind/metablock-action@master
-        id: metablock-deployment-prod
-        if: github.event_name == 'push'
+        run: make build-example
+      - name: stage deployment
+        uses: ./
+        if: github.ref != 'refs/heads/main'
+        with:
+          env: stage
+          bundle: example/dist
+      - name: prod deployment
+        uses: ./
+        if: github.ref == 'refs/heads/main'
         with:
           env: prod
+          bundle: example/dist

Dockerfile

@@ -1,6 +1,6 @@
-FROM node:12-slim
+FROM node:16-slim
 
 WORKDIR /action
 
 ENV DOCKER=yes NODE_ENV=production
-RUN npm i --global @metablock/cli@0.1.9
+RUN npm i --global @metablock/cli@0.23.2

Makefile

@@ -1,17 +1,29 @@
 .PHONY: help update
 
+.PHONY: help
 help:
 	@echo ======================================================================================
 	@fgrep -h "##" $(MAKEFILE_LIST) | fgrep -v fgrep | sed -e 's/\\$$//' | sed -e 's/##//'
 	@echo ======================================================================================
 
 
-image:		## Build image
+.PHONY: image
+image:			## Build image
 	@docker build -t metablock-action .
 
-terminal:	## Terminal
+.PHONY: terminal
+terminal:		## Terminal
 	@docker run -it --rm metablock-action bash
 
 
-update:		## Update dependencies
-	@yarn upgrade --latest
+.PHONY: build-example
+build-example:		## Build example
+	@cd example && yarn && yarn build
+
+.PHONY: outdated-example
+outdated-example:	## Outdated example dependencies
+	@cd example && yarn outdated
+
+.PHONY: update-example
+update-example:		## Update example dependencies
+	@cd example && yarn upgrade --latest

action.yml

@@ -5,6 +5,9 @@ inputs:
     description: "Metablock API token - can be set as METABLOCK_API_TOKEN env variable"
   block:
     description: "Metablock Block ID - can be set as METABLOCK_BLOCK_ID env variable"
+  bundle:
+    description: "Filesystem location of the bundle to deploy"
+    default: "./dist"
   env:
     description: "Metablock environment to deploy"
     default: "stage"
@@ -18,5 +21,7 @@ runs:
     - ${{ inputs.token }}
     - "--block"
     - ${{ inputs.block }}
+    - "--bundle"
+    - ${{ inputs.bundle }}
     - "--env"
     - ${{ inputs.env }}

example/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": "warn",
+  },
+};

example/README.md

@@ -0,0 +1,13 @@
+import React from "react";
+import BlockInfo from "./Info";
+
+const App = () => {
+  return (
+    <div>
+      <h1>Metablock Deployment Starter</h1>
+      <BlockInfo />
+    </div>
+  );
+};
+
+export default App;

example/app/App.tsx

@@ -0,0 +1,24 @@
+import { getBlock } from "@metablock/core";
+import React from "react";
+import ReactJson from "react-json-view";
+
+const BlockInfo = () => {
+  const [state, setState] = React.useState<any>();
+  const [height, setHeight] = React.useState<number>(0);
+
+  const style: any = {};
+  if (height > 0) style.minHeight = `${height}px`;
+
+  const block = getBlock();
+  const shouldSetHeight = (el: any) => {
+    if (el && el.offsetHeight > height) setHeight(el.offsetHeight);
+  };
+
+  return (
+    <div ref={shouldSetHeight}>
+      <ReactJson src={block} theme="monokai" style={style} />
+    </div>
+  );
+};
+
+export default BlockInfo;

example/app/Info.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import App from "./App";
+
+const root: HTMLElement = document.getElementById("__metablock") as HTMLElement;
+
+hydrateRoot(root, <App />);

example/app/main.tsx

@@ -3,20 +3,33 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public"
+    "lint": "eslint 'app/**/*'",
+    "fix": "eslint 'app/**/*' --fix",
+    "build": "export NODE_ENV=production && webpack",
+    "watch": "export NODE_ENV=development && webpack serve --progress",
+    "dev": "export NODE_ENV=production && webpack serve"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^12.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-livereload": "^1.0.0",
-    "rollup-plugin-svelte": "^5.0.3",
-    "rollup-plugin-terser": "^5.1.2",
-    "svelte": "^3.0.0"
+    "@metablock/server": "^0.23.2",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "eslint": "^8.41.0",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.0.4",
+    "webpack": "^5.84.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-require-from": "^1.8.6"
   },
   "dependencies": {
-    "sirv-cli": "^0.4.4"
+    "@metablock/core": "^0.23.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-json-view": "^1.21.3"
   }
 }