Skip to content

Commit 7e2344f

Browse files
YuanZhang98YuanZhang98
committed
Create spotify playlist component
0 parents  commit 7e2344f

File tree

13 files changed

+2238
-0
lines changed

13 files changed

+2238
-0
lines changed

‎.github/workflows/release.yml

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
- main
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v3
14+
- uses: actions/setup-node@v1
15+
with:
16+
node-version: 16
17+
- name: Make the production plugin bundle
18+
run: |
19+
release_version=$(cat package.json | jq -r '.version')
20+
echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
21+
yarn
22+
yarn build
23+
- name: Perform Github Release
24+
uses: softprops/action-gh-release@v1
25+
with:
26+
name: v${{ env.RELEASE_VERSION }}
27+
tag_name: v${{ env.RELEASE_VERSION }}
28+
generate_release_notes: true
29+
files: |
30+
dist/*.tar.gz

‎.gitignore

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# TypeScript v1 declaration files
45+
typings/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
102+
103+
# TernJS port file
104+
.tern-port
105+
106+
.idea/

‎.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.github
3+
rollup.config.js

‎README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Sportify-playlist
2+
This is a readme for your new Budibase plugin.
3+
4+
# Description
5+
An amazing Budibase component!
6+
7+
Find out more about [Budibase](https://github.com/Budibase/budibase).
8+
9+
## Instructions
10+
11+
To build your new plugin run the following in your Budibase CLI:
12+
```
13+
budi plugins --build
14+
```
15+
16+
You can also re-build everytime you make a change to your plugin with the command:
17+
```
18+
budi plugins --watch
19+
```
20+

‎index.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Wrapper from "./lib/Wrapper.svelte"
2+
import schema from "./schema.json"
3+
import pkg from "./package.json"
4+
5+
if (window) {
6+
const plugin = { Component: Wrapper, schema, version: pkg.version }
7+
if (!window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
8+
window["##BUDIBASE_CUSTOM_COMPONENTS##"] = []
9+
}
10+
window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(plugin)
11+
if (window.registerCustomComponent) {
12+
window.registerCustomComponent(plugin)
13+
}
14+
}
15+
16+
export const Component = Wrapper
17+
export const version = pkg.version
18+
export { schema }

‎lib/Boundary.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Boundary from "./Boundary.svelte"
2+
import { createBoundary } from "@crownframework/svelte-error-boundary"
3+
4+
export default createBoundary(Boundary);

‎lib/Boundary.svelte

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
<script>
3+
import pkg from "../package.json"
4+
import { getContext } from "svelte"
5+
6+
export let error = null
7+
8+
const { styleable } = getContext("sdk")
9+
const component = getContext("component")
10+
11+
$: styles = {
12+
normal: {},
13+
id: $component.id,
14+
interactive: true
15+
}
16+
</script>
17+
18+
{#if $error}
19+
<div class="error" use:styleable={styles}>
20+
<b>There was an error running the "{pkg.name}" plugin:</b>
21+
<div class="detail">
22+
{$error}
23+
</div>
24+
</div>
25+
{:else}
26+
<slot />
27+
{/if}
28+
29+
<style>
30+
.error {
31+
background: var(--spectrum-global-color-red-400);
32+
color: white;
33+
border-radius: 4px;
34+
padding: 16px;
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: flex-start;
38+
align-items: stretch;
39+
gap: 8px;
40+
min-width: 400px;
41+
}
42+
.detail {
43+
font-family: monospace;
44+
font-size: 10px;
45+
padding: 8px;
46+
background: rgba(0, 0, 0, 0.1);
47+
border-radius: 4px;
48+
max-height: 100px;
49+
overflow: auto;
50+
}
51+
</style>

‎lib/Wrapper.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
import Component from "../src/Component.svelte"
3+
import Boundary from "./Boundary.js"
4+
</script>
5+
6+
<Boundary>
7+
<Component {...$$props}>
8+
<slot/>
9+
</Component>
10+
</Boundary>

‎package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "Sportify-playlist",
3+
"version": "1.0.0",
4+
"description": "An amazing Budibase component!",
5+
"license": "MIT",
6+
"svelte": "index.js",
7+
"module": "dist/plugin.min.js",
8+
"scripts": {
9+
"build": "rollup -c",
10+
"watch": "rollup -cw"
11+
},
12+
"dependencies": {
13+
"@crownframework/svelte-error-boundary": "^1.0.3",
14+
"svelte": "^3.49.0"
15+
},
16+
"devDependencies": {
17+
"@rollup/plugin-commonjs": "^18.0.0",
18+
"@rollup/plugin-node-resolve": "^11.2.1",
19+
"npm-run-all": "^4.1.5",
20+
"postcss": "^8.2.10",
21+
"rollup": "^2.44.0",
22+
"rollup-plugin-copy2": "^0.3.1",
23+
"rollup-plugin-json": "^4.0.0",
24+
"rollup-plugin-polyfill-node": "^0.8.0",
25+
"rollup-plugin-postcss": "^4.0.0",
26+
"rollup-plugin-svelte": "^7.1.0",
27+
"rollup-plugin-svg": "^2.0.0",
28+
"rollup-plugin-terser": "^7.0.2",
29+
"tar": "^6.1.11"
30+
}
31+
}

‎rollup.config.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import commonjs from "@rollup/plugin-commonjs"
2+
import resolve from "@rollup/plugin-node-resolve"
3+
import svelte from "rollup-plugin-svelte"
4+
import { terser } from "rollup-plugin-terser"
5+
import postcss from "rollup-plugin-postcss"
6+
import svg from "rollup-plugin-svg"
7+
import json from "rollup-plugin-json"
8+
import nodePolyfills from "rollup-plugin-polyfill-node"
9+
import copy from "rollup-plugin-copy2"
10+
import tar from "tar"
11+
import fs from "fs"
12+
import pkg from "./package.json"
13+
import crypto from "crypto"
14+
15+
const ignoredWarnings = [
16+
"unused-export-let",
17+
"css-unused-selector",
18+
"module-script-reactive-declaration",
19+
"a11y-no-onchange",
20+
]
21+
22+
// Custom plugin to clean the dist folder before building
23+
const clean = () => ({
24+
buildStart() {
25+
const dist = "./dist/"
26+
if (fs.existsSync(dist)) {
27+
fs.readdirSync(dist).forEach(path => {
28+
if (path.endsWith(".tar.gz")) {
29+
fs.unlinkSync(dist + path)
30+
}
31+
})
32+
}
33+
},
34+
})
35+
36+
// Custom plugin to hash the JS bundle and write it in the schema
37+
const hash = () => ({
38+
writeBundle() {
39+
// Generate JS hash
40+
const fileBuffer = fs.readFileSync("dist/plugin.min.js")
41+
const hashSum = crypto.createHash("sha1")
42+
hashSum.update(fileBuffer)
43+
const hex = hashSum.digest("hex")
44+
45+
// Read and parse existing schema from dist folder
46+
const schema = JSON.parse(fs.readFileSync("./dist/schema.json", "utf8"))
47+
48+
// Write updated schema to dist folder, pretty printed as JSON again
49+
const newSchema = {
50+
...schema,
51+
hash: hex,
52+
version: pkg.version,
53+
}
54+
fs.writeFileSync("./dist/schema.json", JSON.stringify(newSchema, null, 2))
55+
},
56+
})
57+
58+
// Custom plugin to bundle up our files after building
59+
const bundle = () => ({
60+
async writeBundle() {
61+
const bundleName = `${pkg.name}-${pkg.version}.tar.gz`
62+
return tar
63+
.c({ gzip: true, cwd: "dist" }, [
64+
"plugin.min.js",
65+
"schema.json",
66+
"package.json",
67+
])
68+
.pipe(fs.createWriteStream(`dist/${bundleName}`))
69+
},
70+
})
71+
72+
export default {
73+
input: "index.js",
74+
output: {
75+
sourcemap: process.env.ROLLUP_WATCH ? "inline" : false,
76+
format: "iife",
77+
file: "dist/plugin.min.js",
78+
name: "plugin",
79+
globals: {
80+
svelte: "svelte",
81+
"svelte/internal": "svelte_internal",
82+
},
83+
},
84+
external: ["svelte", "svelte/internal"],
85+
plugins: [
86+
clean(),
87+
svelte({
88+
emitCss: true,
89+
onwarn: (warning, handler) => {
90+
// Ignore some warnings
91+
if (!ignoredWarnings.includes(warning.code)) {
92+
handler(warning)
93+
}
94+
},
95+
}),
96+
postcss(),
97+
commonjs(),
98+
nodePolyfills(),
99+
resolve({
100+
preferBuiltins: true,
101+
browser: true,
102+
skip: ["svelte", "svelte/internal"],
103+
}),
104+
svg(),
105+
json(),
106+
terser(),
107+
copy({
108+
assets: ["schema.json", "package.json"],
109+
}),
110+
hash(),
111+
bundle(),
112+
],
113+
}

0 commit comments

Comments
 (0)