md components - getting TestApp to work

packages/client/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@nx-js/compiler-util": "^2.0.0",
+    "bcryptjs": "^2.4.3",
     "lodash": "^4.17.15",
     "lunr": "^2.3.5",
     "shortid": "^2.2.8",

packages/materialdesign-components/.gitignore

@@ -3,3 +3,4 @@ node_modules
 yarn.lock
 package-lock.json
 dist/index.js
+public/*

packages/materialdesign-components/package.json

@@ -12,8 +12,9 @@
     "publishdev": "yarn build && node ./scripts/publishDev.js"
   },
   "devDependencies": {
-    "@budibase/client": "^0.0.15",
+    "@budibase/client": "^0.0.16",
     "@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",

packages/materialdesign-components/public/bundle.css

@@ -1,3 +0,0 @@
-#current_component.svelte-uuhis1{height:100%;width:100%}
-
-/*# sourceMappingURL=bundle.css.map */

packages/materialdesign-components/public/bundle.css.map

@@ -1,12 +0,0 @@
-{
-  "version": 3,
-  "file": "bundle.css",
-  "sources": [
-    "..\\src\\Test\\TestApp.svelte"
-  ],
-  "sourcesContent": [
-    "<script>\r\nimport createApp from \"./createApp\";\r\nimport { props } from \"./props\";\r\n\r\nlet _bb;\r\n\r\nconst _appPromise = createApp();\r\n_appPromise.then(a => _bb = a);\r\n\r\nconst testProps = props.justAnH1;\r\n\r\nlet currentComponent;\r\n\r\n$: {\r\n    if(_bb && currentComponent) {\r\n        _bb.hydrateChildren(testProps._children, currentComponent);\r\n    }\r\n}\r\n\r\n\r\n\r\n</script>\r\n\r\n{#await _appPromise}\r\nloading\r\n{:then _bb}\r\n\r\n<div id=\"current_component\" bind:this={currentComponent}>\r\n</div>\r\n\r\n{/await}\r\n\r\n\r\n<style>\r\n#current_component {\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n</style>\r\n\r\n"
-  ],
-  "names": [],
-  "mappings": "AAkCA,kBAAkB,cAAC,CAAC,AAChB,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC"
-}

packages/materialdesign-components/public/clientAppDefinition.js

@@ -1 +0,0 @@
-window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[{"name":"customer_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":5}],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[{"name":"Yeo index","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[1],"nodeId":4},{"name":"everyones_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":6}],"nodeId":0},"componentLibraries":["budibase-standard-components"],"appRootPath":"/testApp2","props":{}}

packages/materialdesign-components/public/global.css

@@ -1,62 +0,0 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-body {
-	color: #333;
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-input[type="range"] {
-	height: 0;
-}
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}

packages/materialdesign-components/public/index.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset='utf8'>
-	<meta name='viewport' content='width=device-width'>
-
-	<title>Svelte app</title>
-
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/bundle.css'>
-
-</head>
-
-<body>
-	<script src='/bundle.js'></script>
-</body>
-</html>

packages/materialdesign-components/rollup.testconfig.js

@@ -38,7 +38,10 @@ export default {
 		sourcemap: true,
 		format: 'iife',
 		name: 'app',
-		file: 'public/bundle.js'
+		file: 'public/bundle.js',
+		globals: {
+			"crypto": "crypto"
+		}
 	},
 	plugins: [
 		svelte({
@@ -64,7 +67,8 @@ export default {
 				return importee === 'svelte' 
 					   || importee.startsWith('svelte/')
 					   || coreExternal.includes(importee);
-			}
+			},
+			preferBuiltins: true
 		}),
 		commonjs({
 			namedExports: {

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -13,7 +13,7 @@ let currentComponent;
 
 $: {
     if(_bb && currentComponent) {
-        _bb.hydrateChildren(testProps._children, currentComponent);
+        _bb.hydrateChildren([testProps], currentComponent);
     }
 }
 

packages/materialdesign-components/src/Test/createApp.js

@@ -1,12 +1,13 @@
 import { createApp } from "@budibase/client/src/createApp";
-import componentsJson from "../../components.json";
+import components from "./testComponents";
 import packageJson from "../../package.json";
 
 export default async () =>  {
 
-    const components = {...componentsJson};
+
     delete components._lib;
 
+    const componentLibraries = {};
     componentLibraries[packageJson.name] = components;
 
     const appDef = {hierarchy:{}, actions:{}};

packages/materialdesign-components/src/Test/props.js

@@ -3,6 +3,7 @@ export const props = {
 
     justAnH1 : {
         _component:"@budibase/materialdesign-components/h1",
+        _children: [],
         text: "This is a Header"
     }
 

packages/materialdesign-components/src/Test/testComponents.js

@@ -0,0 +1,3 @@
+import h1 from "../H1.svelte";
+
+export default {h1};

packages/materialdesign-components/src/index.js

@@ -1 +1,2 @@
 export {default as h1} from  "./H1.svelte";
+