dev setup complete
This commit is contained in:
Martin McKeaveney
parent
392de2efcc
commit
7da95c23a3
|
|
@ -105,16 +105,11 @@ const setPackage = (store, initial) => async (pkg) => {
|
|||
initial.libraries = await fetchComponentLibModules(pkg.application)
|
||||
// TODO: Rename to componentDefinitions
|
||||
initial.components = await fetchComponentLibDefinitions(pkg.clientId, pkg.application._id);
|
||||
initial.loadLibraryUrls = pageName => {
|
||||
const libs = libUrlsForPreview(pkg, pageName)
|
||||
return libs
|
||||
}
|
||||
initial.appname = pkg.application.name
|
||||
initial.appId = pkg.application._id
|
||||
initial.pages = pkg.pages
|
||||
initial.hasAppPackage = true
|
||||
initial.screens = values(pkg.screens)
|
||||
// initial.templates = pkg.components.templates
|
||||
initial.builtins = [getBuiltin("##builtin/screenslot")]
|
||||
initial.appInstances = pkg.application.instances
|
||||
initial.appId = pkg.application._id
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@
|
|||
$: screensExist = $store.currentPreviewItem._screens && $store.currentPreviewItem._screens.length > 0
|
||||
|
||||
$: frontendDefinition = {
|
||||
libraries: $store.libraries,
|
||||
appId: $store.appId,
|
||||
libraries: Object.keys($store.libraries),
|
||||
page: $store.currentPreviewItem,
|
||||
screens: screensExist ? $store.currentPreviewItem._screens : [{
|
||||
name: "Screen Placeholder",
|
||||
|
|
|
|||
|
|
@ -1,138 +0,0 @@
|
|||
<script>
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents"
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import { store } from "../builderStore"
|
||||
import { find, sortBy } from "lodash/fp"
|
||||
|
||||
export let onComponentChosen
|
||||
export let onGeneratorChosen
|
||||
export let allowGenerators
|
||||
|
||||
let screens = []
|
||||
let componentLibraries = []
|
||||
|
||||
const addRootComponent = (c, all, isGenerator) => {
|
||||
const { libName } = splitName(c.name)
|
||||
let group = find(r => r.libName === libName)(all)
|
||||
|
||||
if (!group) {
|
||||
group = {
|
||||
libName,
|
||||
components: [],
|
||||
generators: [],
|
||||
}
|
||||
|
||||
all.push(group)
|
||||
}
|
||||
|
||||
if (isGenerator) {
|
||||
group.generators.push(c)
|
||||
} else {
|
||||
group.components.push(c)
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
const newComponentLibraries = []
|
||||
const newscreens = []
|
||||
|
||||
for (let comp of sortBy(["name"])($store.components)) {
|
||||
if (isRootComponent(comp)) {
|
||||
addRootComponent(comp, newComponentLibraries, false)
|
||||
} else {
|
||||
newscreens.push(comp)
|
||||
}
|
||||
}
|
||||
|
||||
for (let generator of $store.generators) {
|
||||
addRootComponent(generator, newComponentLibraries, true)
|
||||
}
|
||||
|
||||
screens = sortBy(["name"])(newscreens)
|
||||
componentLibraries = newComponentLibraries
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each componentLibraries as lib}
|
||||
<div class="library-header">{lib.libName}</div>
|
||||
|
||||
<div class="library-container">
|
||||
|
||||
{#if allowGenerators}
|
||||
<div class="inner-header">Generators</div>
|
||||
|
||||
{#each lib.generators as generator}
|
||||
<div class="component" on:click={() => onGeneratorChosen(generator)}>
|
||||
<div class="name">{splitName(generator.name).componentName}</div>
|
||||
<div class="description">{generator.description}</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<div class="inner-header">Components</div>
|
||||
|
||||
{#each lib.components as component}
|
||||
<div class="component" on:click={() => onComponentChosen(component)}>
|
||||
<div class="name">{splitName(component.name).componentName}</div>
|
||||
<div class="description">{component.description}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="library-header">My Components</div>
|
||||
|
||||
<div class="library-container">
|
||||
|
||||
{#each screens as component}
|
||||
<div class="component" on:click={() => onComponentChosen(component)}>
|
||||
<div class="name">{component.name}</div>
|
||||
<div class="description">{component.description}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.library-header {
|
||||
font-size: 1.1em;
|
||||
border-color: var(--primary25);
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
background-color: var(--primary10);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.library-container {
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.inner-header {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.component {
|
||||
padding: 2px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.component:hover {
|
||||
background-color: var(--lightslate);
|
||||
}
|
||||
|
||||
.component > .name {
|
||||
color: var(--secondary100);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.component > .description {
|
||||
font-size: 0.8em;
|
||||
color: var(--secondary75);
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,8 +34,6 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/materialdesign-components": "^0.0.32",
|
||||
"@budibase/standard-components": "^0.0.32",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"deep-equal": "^2.0.1",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import { createApp } from "./createApp"
|
||||
import { trimSlash } from "./common/trimSlash"
|
||||
import { builtins, builtinLibName } from "./render/builtinComponents"
|
||||
import * as standardComponents from "../../standard-components/dist";
|
||||
import * as materialDesignComponents from "../../materialdesign-components/dist";
|
||||
// import * as standardComponents from "../../standard-components/dist";
|
||||
// import * as materialDesignComponents from "../../materialdesign-components/dist";
|
||||
|
||||
/**
|
||||
* create a web application from static budibase definition files.
|
||||
* @param {object} opts - configuration options for budibase client libary
|
||||
*/
|
||||
export const loadBudibase = async opts => {
|
||||
let componentLibraries = opts && opts.componentLibraries
|
||||
const _window = (opts && opts.window) || window
|
||||
const _localStorage = (opts && opts.localStorage) || localStorage
|
||||
|
||||
|
|
@ -30,24 +29,20 @@ export const loadBudibase = async opts => {
|
|||
let { appRootPath } = frontendDefinition;
|
||||
appRootPath = appRootPath === "" ? "" : "/" + trimSlash(appRootPath)
|
||||
|
||||
// if (!componentLibraries) componentLibraries = {};
|
||||
|
||||
componentLibraries = {
|
||||
"@budibase/standard-components": standardComponents,
|
||||
"@budibase/materialdesign-components": materialDesignComponents
|
||||
const componentLibraryModules = {};
|
||||
const libraries = frontendDefinition.libraries || [
|
||||
"@budibase/standard-components",
|
||||
"@budibase/materialdesign-components",
|
||||
];
|
||||
for (let library of libraries) {
|
||||
// fetch the JavaScript for the component libraries from the server
|
||||
componentLibraryModules[library] = await import(
|
||||
`/${frontendDefinition.appId}/componentlibrary?library=${encodeURI(library)}`
|
||||
);
|
||||
};
|
||||
|
||||
// if (!componentLibraries) {
|
||||
// componentLibraries = {}
|
||||
|
||||
// for (let lib of frontendDefinition.componentLibraries) {
|
||||
// componentLibraries[lib.libName] = await import(
|
||||
// `${frontendDefinition.appRootPath}/${trimSlash(lib.importPath)}`
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
|
||||
componentLibraries[builtinLibName] = builtins(_window)
|
||||
componentLibraryModules[builtinLibName] = builtins(_window)
|
||||
|
||||
const {
|
||||
initialisePage,
|
||||
|
|
@ -56,7 +51,7 @@ export const loadBudibase = async opts => {
|
|||
routeTo,
|
||||
rootNode,
|
||||
} = createApp(
|
||||
componentLibraries,
|
||||
componentLibraryModules,
|
||||
frontendDefinition,
|
||||
user,
|
||||
uiFunctions || {},
|
||||
|
|
|
|||
|
|
@ -2,18 +2,13 @@ const send = require("koa-send");
|
|||
const { resolve, join } = require("path")
|
||||
const { homedir } = require("os");
|
||||
|
||||
const isProduction = process.env.NODE_ENV === "production";
|
||||
|
||||
exports.serveBuilder = async function(ctx) {
|
||||
const builderPath = resolve(process.cwd(), "builder")
|
||||
await send(ctx, ctx.file, { root: builderPath })
|
||||
let builderPath = resolve(process.cwd(), "builder")
|
||||
|
||||
await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
|
||||
}
|
||||
|
||||
exports.serveApp = async function(ctx) {
|
||||
|
||||
// ONLY RELEVANT FOR THE CLIENT LIB
|
||||
// const devPath = join("/tmp", ".budibase", ctx.params.appId);
|
||||
|
||||
// TODO: update homedir stuff to wherever budi is run
|
||||
// default to homedir
|
||||
const appPath = resolve(
|
||||
|
|
@ -24,26 +19,25 @@ exports.serveApp = async function(ctx) {
|
|||
ctx.isAuthenticated ? "main" : "unauthenticated"
|
||||
);
|
||||
|
||||
await send(ctx, ctx.file, { root: appPath })
|
||||
await send(ctx, ctx.file, { root: ctx.devPath || appPath })
|
||||
}
|
||||
|
||||
exports.serveComponentLibrary = async function(ctx) {
|
||||
|
||||
let componentLibraryPath = join(
|
||||
"/tmp",
|
||||
".budibase",
|
||||
// TODO: update homedir stuff to wherever budi is run
|
||||
// default to homedir
|
||||
let componentLibraryPath = resolve(
|
||||
homedir(),
|
||||
".budibase",
|
||||
ctx.params.appId,
|
||||
"node_modules",
|
||||
decodeURI(ctx.query.library),
|
||||
"dist"
|
||||
);
|
||||
|
||||
if (isProduction) {
|
||||
// TODO: update homedir stuff to wherever budi is run
|
||||
// default to homedir
|
||||
componentLibraryPath = resolve(
|
||||
homedir(),
|
||||
".budibase",
|
||||
ctx.params.appId,
|
||||
"node_modules",
|
||||
if (ctx.isDev) {
|
||||
componentLibraryPath = join(
|
||||
"/tmp",
|
||||
".budibase",
|
||||
decodeURI(ctx.query.library),
|
||||
"dist"
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ module.exports = app => {
|
|||
latestPackagesFolder: resolve(homedir(), ".budibase"),
|
||||
secret: "foo"
|
||||
}
|
||||
ctx.isDev = process.env.NODE_ENV !== "production";
|
||||
await next();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ const router = Router();
|
|||
router
|
||||
.param("file", async (file, ctx, next) => {
|
||||
ctx.file = file && file.includes(".") ? file : "index.html";
|
||||
|
||||
// Serving the latest client library in dev
|
||||
if (ctx.isDev && ctx.file.startsWith("budibase-client")) {
|
||||
ctx.devPath = "/tmp/.budibase";
|
||||
}
|
||||
|
||||
await next();
|
||||
})
|
||||
.get("/_builder/:file*", controller.serveBuilder)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"build": "",
|
||||
"initialise": "node ../cli/bin/budi init ./myapps -b local -q",
|
||||
"budi": "node ../cli/bin/budi",
|
||||
"dev:builder": "node index --enable-source-maps"
|
||||
"dev:builder": "nodemon index"
|
||||
},
|
||||
"keywords": [
|
||||
"budibase"
|
||||
|
|
|
|||
|
|
@ -263,17 +263,15 @@
|
|||
}
|
||||
},
|
||||
"datatable": {
|
||||
"description": "Other thingwy",
|
||||
"description": "an HTML table that fetches data from a model or view and displays it.",
|
||||
"props": {
|
||||
"_viewName": "string",
|
||||
"_instanceId": "string",
|
||||
"model": {
|
||||
"store": true,
|
||||
"type": "options",
|
||||
"default": "",
|
||||
"options": [
|
||||
"something",
|
||||
"something"
|
||||
"all_6dc86335-83b7-462c-90ca-1fe7feb08942"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue