init

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+      - name: Make the production plugin bundle
+        run: |
+          release_version=$(cat package.json | jq -r '.version')
+          echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
+          yarn
+          yarn build
+      - name: Perform Github Release
+        uses: softprops/action-gh-release@v1
+        with:
+          name: v${{ env.RELEASE_VERSION }}
+          tag_name: v${{ env.RELEASE_VERSION }}
+          generate_release_notes: true
+          files: |
+            dist/*.tar.gz

.gitignore

@@ -0,0 +1,106 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.idea/

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.github
+rollup.config.js

README.md

@@ -0,0 +1,20 @@
+# Budibase-countup
+This is a readme for your new Budibase plugin.
+
+# Description
+Headline that counts up from an initial number to a target number.
+
+Find out more about [Budibase](https://github.com/Budibase/budibase).
+
+## Instructions
+
+To build your new  plugin run the following in your Budibase CLI:
+```
+budi plugins --build
+```
+
+You can also re-build everytime you make a change to your plugin with the command:
+```
+budi plugins --watch
+```
+

index.js

@@ -0,0 +1,18 @@
+import Wrapper from "./lib/Wrapper.svelte"
+import schema from "./schema.json"
+import pkg from "./package.json"
+
+if (window) {
+    const plugin = { Component: Wrapper, schema, version: pkg.version }
+    if (!window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
+        window["##BUDIBASE_CUSTOM_COMPONENTS##"] = []
+    }
+    window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(plugin)
+    if (window.registerCustomComponent) {
+        window.registerCustomComponent(plugin)
+    }
+}
+
+export const Component = Wrapper
+export const version = pkg.version
+export { schema }

lib/Boundary.js

@@ -0,0 +1,4 @@
+import Boundary from "./Boundary.svelte"
+import { createBoundary } from "@crownframework/svelte-error-boundary"
+
+export default createBoundary(Boundary);

lib/Boundary.svelte

@@ -0,0 +1,51 @@
+
+<script>
+    import pkg from "../package.json"
+    import { getContext } from "svelte"
+
+    export let error = null
+
+    const { styleable } = getContext("sdk")
+    const component = getContext("component")
+
+    $: styles = {
+      normal: {},
+      id: $component.id,
+      interactive: true
+    }
+</script>
+
+{#if $error}
+  <div class="error" use:styleable={styles}>
+    <b>There was an error running the "{pkg.name}" plugin:</b>
+    <div class="detail">
+      {$error}
+    </div>
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .error {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    border-radius: 4px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 8px;
+    min-width: 400px;
+  }
+  .detail {
+    font-family: monospace;
+    font-size: 10px;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    max-height: 100px;
+    overflow: auto;
+  }
+</style>

lib/Wrapper.svelte

@@ -0,0 +1,10 @@
+<script>
+    import Component from "../src/Component.svelte"
+    import Boundary from "./Boundary.js"
+</script>
+
+<Boundary>
+  <Component {...$$props}>
+    <slot/>
+  </Component>
+</Boundary>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "Countup",
+  "version": "1.0.0",
+  "description": "Headline that counts up from an initial number to a target number.",
+  "license": "MIT",
+  "svelte": "index.js",
+  "module": "dist/plugin.min.js",
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -cw"
+  },
+  "dependencies": {
+    "@crownframework/svelte-error-boundary": "^1.0.3",
+    "svelte": "^3.49.0",
+    "svelte-countup": "^0.2.6"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.2.10",
+    "rollup": "^2.44.0",
+    "rollup-plugin-copy2": "^0.3.1",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-polyfill-node": "^0.8.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tar": "^6.1.11"
+  }
+}

rollup.config.js

@@ -0,0 +1,113 @@
+import commonjs from "@rollup/plugin-commonjs"
+import resolve from "@rollup/plugin-node-resolve"
+import svelte from "rollup-plugin-svelte"
+import { terser } from "rollup-plugin-terser"
+import postcss from "rollup-plugin-postcss"
+import svg from "rollup-plugin-svg"
+import json from "rollup-plugin-json"
+import nodePolyfills from "rollup-plugin-polyfill-node"
+import copy from "rollup-plugin-copy2"
+import tar from "tar"
+import fs from "fs"
+import pkg from "./package.json"
+import crypto from "crypto"
+
+const ignoredWarnings = [
+  "unused-export-let",
+  "css-unused-selector",
+  "module-script-reactive-declaration",
+  "a11y-no-onchange",
+]
+
+// Custom plugin to clean the dist folder before building
+const clean = () => ({
+  buildStart() {
+    const dist = "./dist/"
+    if (fs.existsSync(dist)) {
+      fs.readdirSync(dist).forEach(path => {
+        if (path.endsWith(".tar.gz")) {
+          fs.unlinkSync(dist + path)
+        }
+      })
+    }
+  },
+})
+
+// Custom plugin to hash the JS bundle and write it in the schema
+const hash = () => ({
+  writeBundle() {
+    // Generate JS hash
+    const fileBuffer = fs.readFileSync("dist/plugin.min.js")
+    const hashSum = crypto.createHash("sha1")
+    hashSum.update(fileBuffer)
+    const hex = hashSum.digest("hex")
+
+    // Read and parse existing schema from dist folder
+    const schema = JSON.parse(fs.readFileSync("./dist/schema.json", "utf8"))
+
+    // Write updated schema to dist folder, pretty printed as JSON again
+    const newSchema = {
+      ...schema,
+      hash: hex,
+      version: pkg.version,
+    }
+    fs.writeFileSync("./dist/schema.json", JSON.stringify(newSchema, null, 2))
+  },
+})
+
+// Custom plugin to bundle up our files after building
+const bundle = () => ({
+  async writeBundle() {
+    const bundleName = `${pkg.name}-${pkg.version}.tar.gz`
+    return tar
+        .c({ gzip: true, cwd: "dist" }, [
+          "plugin.min.js",
+          "schema.json",
+          "package.json",
+        ])
+        .pipe(fs.createWriteStream(`dist/${bundleName}`))
+  },
+})
+
+export default {
+  input: "index.js",
+  output: {
+    sourcemap: false,
+    format: "iife",
+    file: "dist/plugin.min.js",
+    name: "plugin",
+    globals: {
+      svelte: "svelte",
+      "svelte/internal": "svelte_internal",
+    },
+  },
+  external: ["svelte", "svelte/internal"],
+  plugins: [
+    clean(),
+    svelte({
+      emitCss: true,
+      onwarn: (warning, handler) => {
+        // Ignore some warnings
+        if (!ignoredWarnings.includes(warning.code)) {
+          handler(warning)
+        }
+      },
+    }),
+    postcss(),
+    commonjs(),
+    nodePolyfills(),
+    resolve({
+      preferBuiltins: true,
+      browser: true,
+      skip: ["svelte", "svelte/internal"],
+    }),
+    svg(),
+    json(),
+    terser(),
+    copy({
+      assets: ["schema.json", "package.json"],
+    }),
+    hash(),
+    bundle(),
+  ],
+}