Merge pull request #13 from NEARBuilders/monorepo

remove gitignore from gateway
NEARBuilders · Apr 29, 2024 · d8acab1 · d8acab1
2 parents 125c253 + 4108c74
commit d8acab1
Show file tree

Hide file tree

Showing 45 changed files with 13,837 additions and 1 deletion.
diff --git a/.github/workflows/npm-publish-gateway.yml b/.github/workflows/npm-publish-gateway.yml
@@ -0,0 +1,33 @@
+name: Publish to npm
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "../../gateway"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "21"
+          registry-url: "https://registry.npmjs.org/"
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build your project
+        run: yarn build
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.PUBLISH_NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,35 @@ node_modules
 .DS_Store
 
 /build
-/gateway
+
+gateway/node_modules
+gateway/.pnp
+gateway/.pnp.js
+
+# testing
+gateway/coverage
+gateway/test-results
+
+# production
+gateway/build
+gateway/dist
+
+# misc
+gateway/.DS_Store
+gateway/.env.local
+gateway/.env.development.local
+gateway/.env.test.local
+gateway/.env.production.local
+gateway/.wrangler/
+
+gateway/npm-debug.log*
+gateway/yarn-debug.log*
+gateway/yarn-error.log*
+
+#IDE
+gateway/.idea
+
+gateway/target
+gateway/neardev
+
+gateway/.env
diff --git a/gateway/.babelrc b/gateway/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/preset-react"]
+}
diff --git a/gateway/.gitpod.yml b/gateway/.gitpod.yml
@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run start
+
+
diff --git a/gateway/LICENSE b/gateway/LICENSE
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>
diff --git a/gateway/README.md b/gateway/README.md
@@ -0,0 +1,92 @@
+# NEAR BOS Web Component ( custom element )
+
+This is a Proof of Concept of embedding a NEAR BOS widget into any web application as a Web Component / Custom element.
+
+Just load react production react bundles into your index.html as shown below, and use the `near-social-viewer` custom element to embed the BOS widget.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Near social</title>
+    <script defer="defer" src="/runtime.REPLACE_WITH_BUNDLE_HASH.bundle.js"></script>
+    <script defer="defer" src="/main.REPLACE_WITH_BUNDLE_HASH.bundle.js"></script></head>
+  <body>
+    <h1>NEAR BOS embeddable custom element</h1>
+    <near-social-viewer></near-social-viewer>
+  </body>
+</html>
+```
+
+
+## Setup & Development
+
+Initialize repo:
+```
+yarn
+```
+
+Start development version:
+```
+yarn start
+```
+
+Production build:
+
+```
+yarn prod
+```
+
+Serve the production build:
+
+```
+yarn serve prod
+```
+
+# Use redirectmap for development
+
+The NEAR social VM supports a feature called `redirectMap` which allows you to load widgets from other sources than the on chain social db. An example redirect map can look like this:
+
+```json
+{"devhub.near/widget/devhub.page.feed": {"code": "return 'hello';"}}
+```
+
+The result of applying this redirect map is that the widget `devhub.near/widget/devhub.page.feed` will be replaced by a string that says `hello`.
+
+The `near-social-viewer` web component supports loading a redirect map from the session storage, which is useful when using the viewer for local development or test pipelines.
+
+By setting the session storage key `nearSocialVMredirectMap` to the JSON value of the redirect map, the web component will pass this to the VM Widget config.
+
+You can also use the same mechanism as [near-discovery](https://github.com/near/near-discovery/) where you can load components from a locally hosted [bos-loader](https://github.com/near/bos-loader) by adding the key `flags` to localStorage with the value `{"bosLoaderUrl": "http://127.0.0.1:3030" }`.
+
+
+# Configuring the default widget
+
+The `near-social-viewer` web component supports three attributes:
+
+* `src` : the src of the widget to render (e.g. `devs.near/widget/default`)
+* `code`: raw, valid, stringified widget code to render (e.g. `"return <p>hello world</p>"`)
+* `initialProps`: initial properties to be passed to the rendered widget.
+
+You can modify the default widget that is displayed via the configuration in `./bos.config.json`.
+
+Make changes to `web4/index` as shown below:
+
+```json
+{
+  "account": "devs.near",
+  "web4": {
+    "index": {
+      "src": "devs.near/widget/default",
+      // "code": "return <p>Hello world!</p>"
+      "initialProps": {
+        "message": "hello world!"
+      }
+    }
+  }
+}
+```
+
+Then be sure to build `yarn run prod` to see the changes take effect.
diff --git a/gateway/bos.config.json b/gateway/bos.config.json
@@ -0,0 +1,11 @@
+{
+	"account": "devs.near",
+	"web4": {
+		"index": {
+			"src": "trylivepeer.near/widget/index",
+			"initialProps": {
+				"message": "hello world!"
+			}
+		}
+	}
+}
diff --git a/gateway/config/flags.js b/gateway/config/flags.js
@@ -0,0 +1,20 @@
+// const envConfig = document.getElementById("env-config").textContent;
+// const config = JSON.parse(envConfig);
+
+const config = {
+  bosLoaderUrl: "http://127.0.0.1:8080/api/loader",
+  bosLoaderWs: "ws://127.0.0.1:8080",
+};
+
+export const flags = {
+  bosLoaderUrl:
+    process.env.BOS_LOADER_URL ||
+    config.bosLoaderUrl ||
+    "http://127.0.0.1:4040",
+  bosLoaderWs:
+    process.env.BOS_LOADER_WS || config.bosLoaderWs || "ws://127.0.0.1:4040",
+  enableHotReload:
+    process.env.ENABLE_HOT_RELOAD ?? config.enableHotReload ?? true,
+};
+
+console.log("flags", flags);
diff --git a/gateway/config/paths.js b/gateway/config/paths.js
@@ -0,0 +1,13 @@
+const path = require("path");
+
+const srcPath = path.resolve(__dirname, "../src");
+const distPath = path.resolve(__dirname, "../dist");
+const publicPath = path.resolve(__dirname, "../public");
+const nodeModulesPath = path.resolve(__dirname, "../node_modules");
+
+module.exports = {
+  srcPath,
+  distPath,
+  publicPath,
+  nodeModulesPath,
+};
diff --git a/gateway/config/presets/loadPreset.js b/gateway/config/presets/loadPreset.js
@@ -0,0 +1,13 @@
+const { merge } = require("webpack-merge");
+
+const loadPresets = (env = { presets: [] }) => {
+  const presets = env.presets || [];
+  /** @type {string[]} */
+  const mergedPresets = [].concat(...[presets]);
+  const mergedConfigs = mergedPresets.map((presetName) =>
+    require(`./webpack.${presetName}.js`)(env)
+  );
+
+  return merge({}, ...mergedConfigs);
+};
+module.exports = loadPresets;
diff --git a/gateway/config/presets/webpack.analyze.js b/gateway/config/presets/webpack.analyze.js
@@ -0,0 +1,6 @@
+const WebpackBundleAnalyzer =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+
+module.exports = () => ({
+  plugins: [new WebpackBundleAnalyzer()],
+});
diff --git a/gateway/config/webpack.development.js b/gateway/config/webpack.development.js
@@ -0,0 +1,67 @@
+const path = require("path");
+const webpack = require("webpack");
+const { HotModuleReplacementPlugin } = require("webpack");
+const dotenv = require("dotenv");
+
+dotenv.config();
+
+module.exports = () => ({
+	devtool: false,
+	module: {
+		rules: [
+			{
+				test: /\.(scss|css)$/,
+				use: [
+					{
+						// inject CSS to page
+						loader: "style-loader",
+					},
+					{
+						// translates CSS into CommonJS modules
+						loader: "css-loader",
+					},
+					{
+						// Run postcss actions
+						loader: "postcss-loader",
+						options: {
+							// `postcssOptions` is needed for postcss 8.x;
+							// if you use postcss 7.x skip the key
+							postcssOptions: {
+								// postcss plugins, can be exported to postcss.config.js
+								plugins: function () {
+									return [require("autoprefixer")];
+								},
+							},
+						},
+					},
+					{
+						// compiles Sass to CSS
+						loader: "sass-loader",
+						options: {
+							// Prefer `dart-sass`
+							implementation: require("sass"),
+							sassOptions: {
+								quietDeps: true,
+							},
+						},
+					},
+				],
+			},
+		],
+	},
+	devServer: {
+		open: true,
+		static: path.resolve(__dirname, "../dist"),
+		port: 3000,
+		compress: true,
+		historyApiFallback: {
+			disableDotRule: true,
+		},
+	},
+	plugins: [
+		new HotModuleReplacementPlugin(),
+		new webpack.DefinePlugin({
+			"process.env": JSON.stringify(process.env),
+		}),
+	],
+});