Aliasing config and additional test button component for test app (#66)
* Fix for field modal infinite render loop once closed from click away * Added rollupgenerators to md to keep builder happy * Beginning the button component and general setup * Aliasing config and additional test button component for test app
This commit is contained in:
Conor_Mack
Michael Shanks
parent
c4e167ce04
commit
71abc2a38d
12 changed files with 254 additions and 349 deletions
|
|
@ -1,12 +1,20 @@
|
|||
{
|
||||
"_lib": "./dist/index.js",
|
||||
"h1": {
|
||||
"name": "H1",
|
||||
"description": "An HTML H1 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
"_lib": "./dist/index.js",
|
||||
"h1": {
|
||||
"name": "H1",
|
||||
"description": "An HTML H1 tag",
|
||||
"props": {
|
||||
"text": "string",
|
||||
"className": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"button": {
|
||||
"name": "Button",
|
||||
"description": "A button",
|
||||
"props": {
|
||||
"raised": "bool"
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -13,18 +13,22 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@budibase/client": "^0.0.16",
|
||||
"@material/button": "^4.0.0",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"fs-extra": "^8.1.0",
|
||||
"lodash": "^4.17.15",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"rollup": "^1.11.0",
|
||||
"rollup-plugin-alias": "^2.2.0",
|
||||
"rollup-plugin-commonjs": "^10.0.2",
|
||||
"rollup-plugin-json": "^4.0.0",
|
||||
"rollup-plugin-livereload": "^1.0.1",
|
||||
"rollup-plugin-node-resolve": "^5.0.0",
|
||||
"rollup-plugin-postcss": "^2.0.5",
|
||||
"rollup-plugin-svelte": "^5.0.0",
|
||||
"rollup-plugin-terser": "^5.1.1",
|
||||
"sass": "^1.25.1-test.1",
|
||||
"shortid": "^2.2.15",
|
||||
"sirv-cli": "^0.4.4",
|
||||
"svelte": "^3.12.1"
|
||||
|
|
|
|||
|
|
@ -1,20 +1,37 @@
|
|||
import svelte from 'rollup-plugin-svelte';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import svelte from "rollup-plugin-svelte";
|
||||
import postcss from "rollup-plugin-postcss";
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import path from "path";
|
||||
|
||||
const postcssOptions = () => ({
|
||||
extensions: [".scss", ".sass"],
|
||||
extract: false,
|
||||
minimize: true,
|
||||
use: [
|
||||
[
|
||||
"sass",
|
||||
{
|
||||
includePaths: ["./node_modules"]
|
||||
}
|
||||
]
|
||||
]
|
||||
});
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.js",
|
||||
format: 'esm',
|
||||
name:"budibaseStandardComponents",
|
||||
sourcemap: "inline"
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
svelte({
|
||||
hydratable:true
|
||||
}),
|
||||
resolve()
|
||||
]
|
||||
input: "src/index.js",
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.js",
|
||||
format: "esm",
|
||||
name: "budibaseStandardComponents",
|
||||
sourcemap: "inline"
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
svelte({
|
||||
hydratable: true
|
||||
}),
|
||||
resolve(),
|
||||
postcss(postcssOptions())
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import resolve from "rollup-plugin-node-resolve";
|
||||
|
||||
export default {
|
||||
input: "src/generators.js",
|
||||
output: [
|
||||
{
|
||||
file: "dist/generators.js",
|
||||
format: "esm",
|
||||
name: "budibaseStandardComponents",
|
||||
sourcemap: "inline"
|
||||
}
|
||||
],
|
||||
plugins: [resolve()]
|
||||
};
|
||||
|
|
@ -1,93 +1,149 @@
|
|||
import svelte from 'rollup-plugin-svelte';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import json from 'rollup-plugin-json';
|
||||
import svelte from "rollup-plugin-svelte";
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import commonjs from "rollup-plugin-commonjs";
|
||||
import livereload from "rollup-plugin-livereload";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import json from "rollup-plugin-json";
|
||||
import alias from "rollup-plugin-alias";
|
||||
import path from "path";
|
||||
|
||||
const aliases = {
|
||||
resolve: [".js", ".svelte"],
|
||||
entries: [
|
||||
{ find: "@BBMD", replacement: path.resolve(__dirname, "dist/index.js") }
|
||||
]
|
||||
};
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
const lodash_fp_exports = [
|
||||
"find", "isUndefined", "split", "max",
|
||||
"last", "union", "reduce", "isObject",
|
||||
"cloneDeep", "some", "isArray", "map",
|
||||
"filter", "keys", "isFunction", "isEmpty",
|
||||
"countBy", "join", "includes", "flatten",
|
||||
"constant", "first", "intersection", "take",
|
||||
"has", "mapValues", "isString", "isBoolean",
|
||||
"isNull", "isNumber", "isObjectLike", "isDate",
|
||||
"clone", "values", "keyBy", "isNaN",
|
||||
"isInteger", "toNumber"];
|
||||
"find",
|
||||
"isUndefined",
|
||||
"split",
|
||||
"max",
|
||||
"last",
|
||||
"union",
|
||||
"reduce",
|
||||
"isObject",
|
||||
"cloneDeep",
|
||||
"some",
|
||||
"isArray",
|
||||
"map",
|
||||
"filter",
|
||||
"keys",
|
||||
"isFunction",
|
||||
"isEmpty",
|
||||
"countBy",
|
||||
"join",
|
||||
"includes",
|
||||
"flatten",
|
||||
"constant",
|
||||
"first",
|
||||
"intersection",
|
||||
"take",
|
||||
"has",
|
||||
"mapValues",
|
||||
"isString",
|
||||
"isBoolean",
|
||||
"isNull",
|
||||
"isNumber",
|
||||
"isObjectLike",
|
||||
"isDate",
|
||||
"clone",
|
||||
"values",
|
||||
"keyBy",
|
||||
"isNaN",
|
||||
"isInteger",
|
||||
"toNumber"
|
||||
];
|
||||
|
||||
const lodash_exports = [
|
||||
"flow", "head", "find","each",
|
||||
"tail", "findIndex", "startsWith",
|
||||
"dropRight", "takeRight",
|
||||
"trim", "split", "replace",
|
||||
"merge", "assign"];
|
||||
"flow",
|
||||
"head",
|
||||
"find",
|
||||
"each",
|
||||
"tail",
|
||||
"findIndex",
|
||||
"startsWith",
|
||||
"dropRight",
|
||||
"takeRight",
|
||||
"trim",
|
||||
"split",
|
||||
"replace",
|
||||
"merge",
|
||||
"assign"
|
||||
];
|
||||
|
||||
const coreExternal = [
|
||||
"lodash", "lodash/fp", "date-fns",
|
||||
"lunr", "safe-buffer", "shortid",
|
||||
"@nx-js/compiler-util", "bcryptjs"
|
||||
"lodash",
|
||||
"lodash/fp",
|
||||
"date-fns",
|
||||
"lunr",
|
||||
"safe-buffer",
|
||||
"shortid",
|
||||
"@nx-js/compiler-util",
|
||||
"bcryptjs"
|
||||
];
|
||||
|
||||
export default {
|
||||
input: 'src/Test/testMain.js',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/bundle.js',
|
||||
globals: {
|
||||
"crypto": "crypto"
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file — better for performance
|
||||
css: css => {
|
||||
css.write('public/bundle.css');
|
||||
},
|
||||
|
||||
hydratable:true
|
||||
}),
|
||||
input: "src/Test/testMain.js",
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: "iife",
|
||||
name: "app",
|
||||
file: "public/bundle.js",
|
||||
globals: {
|
||||
crypto: "crypto"
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
alias(aliases),
|
||||
svelte({
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file — better for performance
|
||||
css: css => {
|
||||
css.write("public/bundle.css");
|
||||
},
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration —
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/rollup-plugin-commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: importee => {
|
||||
return importee === 'svelte'
|
||||
|| importee.startsWith('svelte/')
|
||||
|| coreExternal.includes(importee);
|
||||
},
|
||||
preferBuiltins: true
|
||||
}),
|
||||
commonjs({
|
||||
namedExports: {
|
||||
"lodash/fp": lodash_fp_exports,
|
||||
"lodash":lodash_exports,
|
||||
"shortid": ["generate"]
|
||||
}
|
||||
}),
|
||||
json(),
|
||||
hydratable: true
|
||||
}),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration —
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/rollup-plugin-commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: importee => {
|
||||
return (
|
||||
importee === "svelte" ||
|
||||
importee.startsWith("svelte/") ||
|
||||
coreExternal.includes(importee)
|
||||
);
|
||||
},
|
||||
preferBuiltins: true
|
||||
}),
|
||||
commonjs({
|
||||
namedExports: {
|
||||
"lodash/fp": lodash_fp_exports,
|
||||
lodash: lodash_exports,
|
||||
shortid: ["generate"]
|
||||
}
|
||||
}),
|
||||
json(),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload("public"),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
|
|
|
|||
12
packages/materialdesign-components/src/Button.svelte
Normal file
12
packages/materialdesign-components/src/Button.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import "@material/button/mdc-button.scss";
|
||||
export let raised = false;
|
||||
|
||||
let c = raised ? "mdc-button mdc-button--raised" : "mdc-button";
|
||||
</script>
|
||||
|
||||
<button class={c}>
|
||||
<div class="mdc-button__ripple" />
|
||||
|
||||
<span class="mdc-button__label">Button</span>
|
||||
</button>
|
||||
|
|
@ -1,40 +1,35 @@
|
|||
<script>
|
||||
import createApp from "./createApp";
|
||||
import { props } from "./props";
|
||||
import createApp from "./createApp";
|
||||
import { props } from "./props";
|
||||
|
||||
let _bb;
|
||||
let _bb;
|
||||
|
||||
const _appPromise = createApp();
|
||||
_appPromise.then(a => _bb = a);
|
||||
const _appPromise = createApp();
|
||||
_appPromise.then(a => (_bb = a));
|
||||
|
||||
const testProps = props.justAnH1;
|
||||
const testProps = props.justAnH1;
|
||||
const button = props.button;
|
||||
|
||||
let currentComponent;
|
||||
let currentComponent;
|
||||
|
||||
$: {
|
||||
if(_bb && currentComponent) {
|
||||
_bb.hydrateChildren([testProps], currentComponent);
|
||||
$: {
|
||||
if (_bb && currentComponent) {
|
||||
_bb.hydrateChildren([testProps, button], currentComponent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await _appPromise}
|
||||
loading
|
||||
{:then _bb}
|
||||
|
||||
<div id="current_component" bind:this={currentComponent}>
|
||||
</div>
|
||||
|
||||
{/await}
|
||||
|
||||
|
||||
<style>
|
||||
#current_component {
|
||||
#current_component {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#await _appPromise}
|
||||
loading
|
||||
{:then _bb}
|
||||
|
||||
<div id="current_component" bind:this={currentComponent} />
|
||||
|
||||
{/await}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
|
||||
export const props = {
|
||||
|
||||
justAnH1 : {
|
||||
_component:"@budibase/materialdesign-components/h1",
|
||||
_children: [],
|
||||
text: "This is a Header"
|
||||
}
|
||||
|
||||
}
|
||||
justAnH1: {
|
||||
_component: "@budibase/materialdesign-components/h1",
|
||||
_children: [],
|
||||
text: "This is a Header"
|
||||
},
|
||||
button: {
|
||||
_component: "@budibase/materialdesign-components/button",
|
||||
_children: [],
|
||||
raised: true
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import h1 from "../H1.svelte";
|
||||
import { button } from "@BBMD";
|
||||
|
||||
export default {h1};
|
||||
export default { h1, button };
|
||||
|
|
|
|||
0
packages/materialdesign-components/src/generators.js
Normal file
0
packages/materialdesign-components/src/generators.js
Normal file
|
|
@ -1,2 +1,3 @@
|
|||
export {default as h1} from "./H1.svelte";
|
||||
export { default as h1 } from "./H1.svelte";
|
||||
export { default as button } from "./Button.svelte";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue