Initial commit

.dev/localhost.cert

@@ -0,0 +1,29 @@
+-----BEGIN CERTIFICATE-----
+MIIFCzCCAvOgAwIBAgIUfLvXiw1GaycV+Ya/jmJ54EqjEb0wDQYJKoZIhvcNAQEL
+BQAwFDESMBAGA1UEAwwJMTI3LjAuMC4xMCAXDTI0MDIxNTEyMDMxM1oYDzIwNTEw
+NzAyMTIwMzEzWjAUMRIwEAYDVQQDDAkxMjcuMC4wLjEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQDDdhdcQr1JGffkrBK7zDukb79YkD5Hg1FWWgByztdv
+dc0jvEnGLqkgaL8NYlmZqh5NRZ7ncp/A3C01wxGMAL1jhjcX56wt0hQRdszGdi0J
+XN8Ixqa2JLcNn20D4152HPgB7F/JlTPviW4Bws67sUs3JT0wrdjtx77rg4tPCL/S
+qP6N21EHXokVnwQHkFh/MUx1+agHDZL6U9iB0MKVErL/q2HLibQfjkJs5Y6kzdQQ
+WwVwbZul8XzEi9lU90hnBqT4wvDxYYzKZD+o4965B0ThhDbuYN8J4VCLE1mOLlhC
+bpKfMdwA3Un881MgWQXImGseAu1vYN7a8P3xy1LsLdjb6Du86/fQ8SL3YfH+wlw6
+5eQ2J3KYheQgpwlpmIvjLNFqc72ymCIjcWWfW7gT81XmdfhlKObo8HQdrp1uMrSN
+78xRLu9kRmL1iqHgqTF8kn3jUAGPr5EoUyzf8z8cX2Px0B7y8x/o845+CySHenZv
+AMkxA7N46c4M7o8kwHHm79dQO0Ep6dyiCTTII+DWe5BpbNlq1ddWynk5Rc2KQrvT
+oBV0cLpjvXQAlWB9YzqG6J4tvnfO3RjgUNgxfSDF2XW2Wi1mtnsk8m4NDGgOjLz0
+lVrPaeEXMDWiofpuMMW02MIYGTTYSFvO/TPO06tjVxq2jDshoUNS9faRhSxuOCEP
+CQIDAQABo1MwUTAdBgNVHQ4EFgQU7UYziQNqS7MqiGXjxN5KDKz784UwHwYDVR0j
+BBgwFoAU7UYziQNqS7MqiGXjxN5KDKz784UwDwYDVR0TAQH/BAUwAwEB/zANBgkq
+hkiG9w0BAQsFAAOCAgEAgZGo35kJFFEYS1iBHeLuo/7grrA2wcjR4e2eONKq21QU
+FJfbp+CpWkvMjq0SBq174KgfNpGrKD5KnfpBJoVD/9s43XGSCDzitZeW2mQtQ3uD
+nMYWGNE2rceZWmdDOKhhKMeDRdfososIdtFxBYW6nS9Znx2IwAvlDeOobmwgmUzb
+C2Y0S3lUnwQ2E7WStIN7zm43aFVRgigIm71sSWKpQoCfoy63ETG4m2q7uu/Ldw3y
+vGF2KA//ThrjWljqNu3xIRaSFWYhKJ6/Y78NNsg5vIoiI+Wk4PigY8Z3UQWdGjmW
+9tZG7SAN2b4s6Zan2fbF3R4q6H3x3N3ZsjKVlBroyaOLN4WFABIHbU81ggFxIsFO
+6RXHfNGDuPuYTrtlogvJ47nI4C5WeUFDWFcZQQ7BrS9ewZcLI5fOvejjlFqvSl87
+Y1StpTgVUEFL08bdjyFtAw7miJeofyT8bO1m/0Hg+snBtvBCCAJxflSVuySLp5Bi
+EtFxi53J+kezvRm64Y9ub61NGatXUAuPr7Z0P58ES6MgpoYgzUGeybV97MpDsRQb
+ze3fzqL5rE3Upb2asgINWjAXDM2Qhr8aY0OVKJQ1P4c+yyddlb3vzNfw0G5W0bsJ
+na+/Pfz1M60k1OxsWUGXWOPIEi29VeERDzSwhC4zShPAKYIlqrUpMunHoAGlGvM=
+-----END CERTIFICATE-----

.dev/localhost.key

@@ -0,0 +1,52 @@
+-----BEGIN PRIVATE KEY-----
+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
+0C66dFZAOvWn1oIUWWms2ytx0rg7sA==
+-----END PRIVATE KEY-----

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+
+[*.{js,jsx,mdx,ts,json,mjs,css}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.eslintrc.cjs
+esbuild.config.js

.eslintrc.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ["eslint:recommended", "prettier"],
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "linebreak-style": 0,
+
+    /* This rule will warn when it encounters a reference to an identifier that has not yet been declared. */
+    "no-use-before-define": [
+      "error",
+      {
+        variables: false,
+      },
+    ],
+
+    /* Enforce require() on the top-level module scope */
+    "global-require": 0,
+
+    "max-len": [
+      "error",
+      {
+        code: 120,
+      },
+    ],
+
+    "guard-for-in": 0,
+    "no-underscore-dangle": 0,
+    "import/prefer-default-export": 0,
+    "import/no-anonymous-default-export": 0,
+    "import/no-extraneous-dependencies": 0,
+  },
+};

.github/workflows/build.yml

@@ -0,0 +1,48 @@
+name: Build & Release
+
+permissions:
+    contents: write
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  build-release: 
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js 18.x
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18.x
+    - run: yarn
+    - run: yarn build
+    - name: Create tar from built plugin
+      run: | 
+        BUILDFOLDER="dist"
+        MANIFEST=$(find ./$BUILDFOLDER -name plugin-manifest.json)
+        [ -z $MANIFEST ] && cp plugin-manifest $BUILDFOLDER
+        MANIFEST="$BUILDFOLDER/plugin-manifest.json"
+        VERSION=$(jq '.version' $MANIFEST -r)
+        echo "version=$VERSION"
+        mkdir -p output
+        tar -C $BUILDFOLDER -czf output/$VERSION.tar.gz .
+        ls -la output
+        echo "version=$VERSION" >> $GITHUB_ENV
+    - name: Create artifact 
+      uses: actions/upload-artifact@v4
+      with:
+          name: plugin-package
+          path: output
+    - name: Release built plugin
+      uses: svenstaro/upload-release-action@v2
+      with:
+        repo_token: ${{ secrets.GITHUB_TOKEN }}
+        file: output/*
+        tag: ${{ env.version }}
+        overwrite: true
+        file_glob: true
+      if: github.ref == 'refs/heads/main'

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "[css][scss][javascript][typescript][javascriptreact][typescriptreact][json][mdx][html]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+}

Readme.md

@@ -0,0 +1,56 @@
+[[_TOC_]]
+
+# Plain JS Plugin
+
+## Quick start
+
+1. `yarn` - to install dependencies
+2. `yarn start` - to start development mode - rebuild on file modifications
+3. update your `plugin-manifest.json` file to contain the production URL and other plugin information
+4. `yarn build` - to build plugins
+
+## Dev environment
+
+Dev environment is configured to use:
+
+* `prettier` - best used with automatic format on save in IDE
+* `eslint` - it is built into both `start` and `build` commands
+
+## Output
+
+The plugins are built into a single `dist/index.js` file. The manifest is copied to `dist/plugin-manifest.json` file.
+
+## Deployment
+
+<!-- TO DO -->
+
+## Loading the plugin
+
+**Warning:** While developing, you can use  `https://localhost:3053/plugin-manifest.json` address to load the plugin manifest. Make sure your browser trusts the local certificate on the latter, to be able to use it e.g. with `https://editor.flotiq.com`
+
+### URL
+
+**Hint**: You can use localhost url from development mode `https://localhost:3053/index.js`
+
+1. Open Flotiq editor
+2. Open Chrome Dev console
+3. Execute the following script
+   ```javascript
+   FlotiqPlugins.loadPlugin('plugin-id', '<URL TO COMPILED JS>')
+   ```
+4. Navigate to the view that is modified by the plugin
+
+### Directly
+
+1. Open Flotiq editor
+2. Open Chrome Dev console
+3. Paste the content of `dist/index.js` 
+4. Navigate to the view that is modified by the plugin
+
+### Deployment
+
+**Hint**: You can use localhost url from development mode `https://localhost:3053/plugin-manifest.json`
+
+1. Open Flotiq editor
+2. Add a new plugin and paste the URL to the hosted `plugin-manifest.json` file
+3. Navigate to the view that is modified by the plugin

common/api-helpers.js

@@ -0,0 +1,17 @@
+const cachedRelationData = {};
+
+const getRelationData = (client, dataUrl) => {
+  if (!dataUrl) return null;
+  if (cachedRelationData[dataUrl]) return cachedRelationData[dataUrl];
+  const { contentTypeName, id } = dataUrl.match(
+    /(?<contentTypeName>[^/]+)\/(?<id>[^/]+)$/,
+  ).groups;
+
+  cachedRelationData[dataUrl] = client[contentTypeName]
+    .get(id)
+    .then(({ body }) => body);
+
+  return cachedRelationData[dataUrl];
+};
+
+export { getRelationData };

common/plugin-element-cache.js

@@ -0,0 +1,27 @@
+const appRoots = {};
+
+export const addElementToCache = (element, key, data = {}) => {
+  appRoots[key] = {
+    element,
+    data,
+  };
+
+  element.addEventListener('flotiq.detached', () => {
+    setTimeout(() => {
+      return delete appRoots[key];
+    }, 50);
+  });
+};
+
+export const getCachedElement = (key) => {
+  return appRoots[key];
+};
+
+export const registerFn = (pluginInfo, callback) => {
+  if (window.FlotiqPlugins?.add) {
+    window.FlotiqPlugins.add(pluginInfo, callback);
+    return;
+  }
+  if (!window.initFlotiqPlugins) window.initFlotiqPlugins = [];
+  window.initFlotiqPlugins.push({ pluginInfo, callback });
+};