MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2020-01-28 13:00:05 +00:00 committed by Michael Shanks
parent c4e167ce04
commit 71abc2a38d
12 changed files with 254 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/materialdesign-components/components.json
View File

@ -1,12 +1,20 @@
{ {
"_lib": "./dist/index.js", "_lib": "./dist/index.js",
"h1": { "h1": {
"name": "H1", "name": "H1",
"description": "An HTML H1 tag", "description": "An HTML H1 tag",
"props" : { "props": {
"text": "string", "text": "string",
"className":"string" "className": "string"
}, },
"tags": [] "tags": []
} },
} "button": {
"name": "Button",
"description": "A button",
"props": {
"raised": "bool"
},
"tags": []
}
}

207
packages/materialdesign-components/dist/generators.js vendored
View File

File diff suppressed because one or more lines are too long

4
packages/materialdesign-components/package.json
View File

@ -13,18 +13,22 @@
}, },
"devDependencies": { "devDependencies": {
"@budibase/client": "^0.0.16", "@budibase/client": "^0.0.16",
"@material/button": "^4.0.0",
"@nx-js/compiler-util": "^2.0.0", "@nx-js/compiler-util": "^2.0.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"fs-extra": "^8.1.0", "fs-extra": "^8.1.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"rollup": "^1.11.0", "rollup": "^1.11.0",
"rollup-plugin-alias": "^2.2.0",
"rollup-plugin-commonjs": "^10.0.2", "rollup-plugin-commonjs": "^10.0.2",
"rollup-plugin-json": "^4.0.0", "rollup-plugin-json": "^4.0.0",
"rollup-plugin-livereload": "^1.0.1", "rollup-plugin-livereload": "^1.0.1",
"rollup-plugin-node-resolve": "^5.0.0", "rollup-plugin-node-resolve": "^5.0.0",
"rollup-plugin-postcss": "^2.0.5",
"rollup-plugin-svelte": "^5.0.0", "rollup-plugin-svelte": "^5.0.0",
"rollup-plugin-terser": "^5.1.1", "rollup-plugin-terser": "^5.1.1",
"sass": "^1.25.1-test.1",
"shortid": "^2.2.15", "shortid": "^2.2.15",
"sirv-cli": "^0.4.4", "sirv-cli": "^0.4.4",
"svelte": "^3.12.1" "svelte": "^3.12.1"

51
packages/materialdesign-components/rollup.config.js
View File

@ -1,20 +1,37 @@
import svelte from 'rollup-plugin-svelte'; import svelte from "rollup-plugin-svelte";
import resolve from 'rollup-plugin-node-resolve'; 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 { export default {
input: 'src/index.js', input: "src/index.js",
output: [ output: [
{ {
file: "dist/index.js", file: "dist/index.js",
format: 'esm', format: "esm",
name:"budibaseStandardComponents", name: "budibaseStandardComponents",
sourcemap: "inline" sourcemap: "inline"
} }
], ],
plugins: [ plugins: [
svelte({ svelte({
hydratable:true hydratable: true
}), }),
resolve() resolve(),
] postcss(postcssOptions())
]
}; };

14
packages/materialdesign-components/rollup.generatorsconfig.js Normal file
View File

@ -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()]
};

212
packages/materialdesign-components/rollup.testconfig.js
View File

@ -1,93 +1,149 @@
import svelte from 'rollup-plugin-svelte'; import svelte from "rollup-plugin-svelte";
import resolve from 'rollup-plugin-node-resolve'; import resolve from "rollup-plugin-node-resolve";
import commonjs from 'rollup-plugin-commonjs'; import commonjs from "rollup-plugin-commonjs";
import livereload from 'rollup-plugin-livereload'; import livereload from "rollup-plugin-livereload";
import { terser } from 'rollup-plugin-terser'; import { terser } from "rollup-plugin-terser";
import json from 'rollup-plugin-json'; 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 production = !process.env.ROLLUP_WATCH;
const lodash_fp_exports = [ const lodash_fp_exports = [
"find", "isUndefined", "split", "max", "find",
"last", "union", "reduce", "isObject", "isUndefined",
"cloneDeep", "some", "isArray", "map", "split",
"filter", "keys", "isFunction", "isEmpty", "max",
"countBy", "join", "includes", "flatten", "last",
"constant", "first", "intersection", "take", "union",
"has", "mapValues", "isString", "isBoolean", "reduce",
"isNull", "isNumber", "isObjectLike", "isDate", "isObject",
"clone", "values", "keyBy", "isNaN", "cloneDeep",
"isInteger", "toNumber"]; "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 = [ const lodash_exports = [
"flow", "head", "find","each", "flow",
"tail", "findIndex", "startsWith", "head",
"dropRight", "takeRight", "find",
"trim", "split", "replace", "each",
"merge", "assign"]; "tail",
"findIndex",
"startsWith",
"dropRight",
"takeRight",
"trim",
"split",
"replace",
"merge",
"assign"
];
const coreExternal = [ const coreExternal = [
"lodash", "lodash/fp", "date-fns", "lodash",
"lunr", "safe-buffer", "shortid", "lodash/fp",
"@nx-js/compiler-util", "bcryptjs" "date-fns",
"lunr",
"safe-buffer",
"shortid",
"@nx-js/compiler-util",
"bcryptjs"
]; ];
export default { export default {
input: 'src/Test/testMain.js', input: "src/Test/testMain.js",
output: { output: {
sourcemap: true, sourcemap: true,
format: 'iife', format: "iife",
name: 'app', name: "app",
file: 'public/bundle.js', file: "public/bundle.js",
globals: { globals: {
"crypto": "crypto" crypto: "crypto"
} }
}, },
plugins: [ plugins: [
svelte({ alias(aliases),
// enable run-time checks when not in production svelte({
dev: !production, // enable run-time checks when not in production
// we'll extract any component CSS out into dev: !production,
// a separate file — better for performance // we'll extract any component CSS out into
css: css => { // a separate file — better for performance
css.write('public/bundle.css'); css: css => {
}, css.write("public/bundle.css");
},
hydratable:true
}),
// If you have external dependencies installed from hydratable: true
// 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(),
// Watch the `public` directory and refresh the // If you have external dependencies installed from
// browser on changes when not in production // npm, you'll most likely need these plugins. In
!production && livereload('public'), // 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 // Watch the `public` directory and refresh the
// instead of npm run dev), minify // browser on changes when not in production
production && terser() !production && livereload("public"),
],
watch: { // If we're building for production (npm run build
clearScreen: false // instead of npm run dev), minify
} production && terser()
],
watch: {
clearScreen: false
}
}; };

12
packages/materialdesign-components/src/Button.svelte Normal file
View 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>

47
packages/materialdesign-components/src/Test/TestApp.svelte
View File

@ -1,40 +1,35 @@
<script> <script>
import createApp from "./createApp"; import createApp from "./createApp";
import { props } from "./props"; import { props } from "./props";
let _bb; let _bb;
const _appPromise = createApp(); const _appPromise = createApp();
_appPromise.then(a => _bb = a); _appPromise.then(a => (_bb = a));
const testProps = props.justAnH1; const testProps = props.justAnH1;
const button = props.button;
let currentComponent; let currentComponent;
$: { $: {
if(_bb && currentComponent) { if (_bb && currentComponent) {
_bb.hydrateChildren([testProps], currentComponent); _bb.hydrateChildren([testProps, button], currentComponent);
} }
} }
</script> </script>
{#await _appPromise}
loading
{:then _bb}
<div id="current_component" bind:this={currentComponent}>
</div>
{/await}
<style> <style>
#current_component { #current_component {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>
{#await _appPromise}
loading
{:then _bb}
<div id="current_component" bind:this={currentComponent} />
{/await}

20
packages/materialdesign-components/src/Test/props.js
View File

@ -1,10 +1,12 @@
export const props = { export const props = {
justAnH1: {
justAnH1 : { _component: "@budibase/materialdesign-components/h1",
_component:"@budibase/materialdesign-components/h1", _children: [],
_children: [], text: "This is a Header"
text: "This is a Header" },
} button: {
_component: "@budibase/materialdesign-components/button",
} _children: [],
raised: true
}
};

3
packages/materialdesign-components/src/Test/testComponents.js
View File

@ -1,3 +1,4 @@
import h1 from "../H1.svelte"; 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
View File

3
packages/materialdesign-components/src/index.js
View 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";