forked from tsai/budibase
Andrew Kingston
5 years ago
26 changed files with 533 additions and 92 deletions
@ -0,0 +1,57 @@ |
|||
<script> |
|||
import { getContext } from "svelte" |
|||
import { Layout, Heading, Tabs, Tab, Icon } from "@budibase/bbui" |
|||
import DevToolsStatsTab from "./DevToolsStatsTab.svelte" |
|||
import DevToolsComponentTab from "./DevToolsComponentTab.svelte" |
|||
import { devToolsStore } from "../../stores" |
|||
|
|||
const context = getContext("context") |
|||
</script> |
|||
|
|||
<div class="devtools" class:mobile={$context.device.mobile}> |
|||
<Layout noPadding gap="XS"> |
|||
<div class="header"> |
|||
<Heading size="XS">Budibase DevTools</Heading> |
|||
<Icon |
|||
hoverable |
|||
name="Close" |
|||
on:click={() => devToolsStore.actions.setVisible(false)} |
|||
/> |
|||
</div> |
|||
<Tabs selected="Application"> |
|||
<Tab title="Application"> |
|||
<div class="tab-content"> |
|||
<DevToolsStatsTab /> |
|||
</div> |
|||
</Tab> |
|||
<Tab title="Components"> |
|||
<div class="tab-content"> |
|||
<DevToolsComponentTab /> |
|||
</div> |
|||
</Tab> |
|||
</Tabs> |
|||
</Layout> |
|||
</div> |
|||
|
|||
<style> |
|||
.devtools { |
|||
background: var(--spectrum-alias-background-color-secondary); |
|||
flex: 0 0 320px; |
|||
border-left: 1px solid var(--spectrum-global-color-gray-300); |
|||
} |
|||
.devtools.mobile { |
|||
display: none; |
|||
} |
|||
|
|||
.header { |
|||
padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl); |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.tab-content { |
|||
padding: 0 var(--spacing-xl); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
<script> |
|||
import { |
|||
Body, |
|||
Layout, |
|||
Heading, |
|||
Button, |
|||
TextArea, |
|||
Divider, |
|||
} from "@budibase/bbui" |
|||
import { builderStore, devToolsStore, componentStore } from "stores" |
|||
import DevToolsStat from "./DevToolsStat.svelte" |
|||
|
|||
$: selectedInstance = $componentStore.selectedComponentInstance |
|||
|
|||
$: { |
|||
if (!selectedInstance) { |
|||
builderStore.actions.selectComponent(null) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
{#if !$builderStore.selectedComponentId} |
|||
<Layout noPadding gap="S"> |
|||
<Heading size="XS">Please choose a component</Heading> |
|||
<Body size="S"> |
|||
Press the button below to enable component selection, then click a |
|||
component in your app to view what context values are available. |
|||
</Body> |
|||
<div> |
|||
<Button |
|||
cta |
|||
on:click={() => devToolsStore.actions.setAllowSelection(true)} |
|||
> |
|||
Choose component |
|||
</Button> |
|||
</div> |
|||
</Layout> |
|||
{:else} |
|||
<Layout noPadding> |
|||
<Layout noPadding gap="XS"> |
|||
<DevToolsStat |
|||
label="Component" |
|||
value={$componentStore.selectedComponent?._instanceName} |
|||
/> |
|||
<DevToolsStat |
|||
label="Type" |
|||
value={$componentStore.selectedComponentDefinition?.name} |
|||
/> |
|||
<DevToolsStat label="ID" value={$componentStore.selectedComponent?._id} /> |
|||
</Layout> |
|||
<div> |
|||
<Button |
|||
cta |
|||
on:click={() => devToolsStore.actions.setAllowSelection(true)} |
|||
> |
|||
Change component |
|||
</Button> |
|||
</div> |
|||
<div class="data"> |
|||
<Layout noPadding gap="XS"> |
|||
<TextArea |
|||
readonly |
|||
label="Data context" |
|||
value={JSON.stringify(selectedInstance?.getDataContext(), null, 2)} |
|||
/> |
|||
<TextArea |
|||
readonly |
|||
label="Raw settings" |
|||
value={JSON.stringify(selectedInstance?.getRawSettings(), null, 2)} |
|||
/> |
|||
<TextArea |
|||
readonly |
|||
label="Enriched settings" |
|||
value={JSON.stringify(selectedInstance?.getSettings(), null, 2)} |
|||
/> |
|||
</Layout> |
|||
</div> |
|||
</Layout> |
|||
{/if} |
|||
|
|||
<style> |
|||
.data :global(.spectrum-Textfield-input) { |
|||
min-height: 200px !important; |
|||
white-space: pre; |
|||
font-size: var(--font-size-s); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<script> |
|||
import { Heading, Button, Select } from "@budibase/bbui" |
|||
import { devToolsStore } from "../../stores" |
|||
import { getContext } from "svelte" |
|||
|
|||
const context = getContext("context") |
|||
|
|||
$: previewOptions = [ |
|||
{ |
|||
label: "View as yourself", |
|||
value: "self", |
|||
}, |
|||
{ |
|||
label: "View as public user", |
|||
value: "PUBLIC", |
|||
}, |
|||
{ |
|||
label: "View as basic user", |
|||
value: "BASIC", |
|||
}, |
|||
{ |
|||
label: "View as power user", |
|||
value: "POWER", |
|||
}, |
|||
{ |
|||
label: "View as admin user", |
|||
value: "ADMIN", |
|||
}, |
|||
] |
|||
</script> |
|||
|
|||
<div class="dev-preview-header" class:mobile={$context.device.mobile}> |
|||
<Heading size="XS">Application Preview</Heading> |
|||
<Select |
|||
quiet |
|||
options={previewOptions} |
|||
value={$devToolsStore.role || "self"} |
|||
placeholder={null} |
|||
autoWidth |
|||
on:change={e => devToolsStore.actions.changeRole(e.detail)} |
|||
/> |
|||
{#if !$context.device.mobile} |
|||
<Button |
|||
quiet |
|||
overBackground |
|||
icon="Code" |
|||
on:click={() => devToolsStore.actions.setVisible(true)} |
|||
> |
|||
Open DevTools |
|||
</Button> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.dev-preview-header { |
|||
height: 50px; |
|||
display: grid; |
|||
align-items: center; |
|||
background-color: var(--spectrum-global-color-blue-400); |
|||
padding: 0 var(--spacing-xl); |
|||
grid-template-columns: 1fr auto auto; |
|||
grid-gap: var(--spacing-xl); |
|||
} |
|||
.dev-preview-header.mobile { |
|||
flex: 0 0 50px; |
|||
grid-template-columns: 1fr auto; |
|||
} |
|||
.dev-preview-header |
|||
:global(.spectrum-Heading, .spectrum-Picker-menuIcon, .spectrum-Picker-label) { |
|||
color: white !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,23 @@ |
|||
<script> |
|||
export let label |
|||
export let value |
|||
</script> |
|||
|
|||
<div class="stat"> |
|||
<div class="stat-label">{label}</div> |
|||
<div class="stat-value">{value}</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.stat { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.stat-label { |
|||
font-size: var(--font-size-xs); |
|||
color: var(--spectrum-global-color-gray-600); |
|||
text-transform: uppercase; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,24 @@ |
|||
<script> |
|||
import { Layout } from "@budibase/bbui" |
|||
import { authStore, appStore, screenStore } from "stores" |
|||
import DevToolsStat from "./DevToolsStat.svelte" |
|||
</script> |
|||
|
|||
<Layout noPadding gap="XS"> |
|||
<DevToolsStat label="App" value={$appStore.application?.name} /> |
|||
<DevToolsStat label="Tenant" value={$appStore.application?.tenantId} /> |
|||
<DevToolsStat label="Version" value={$appStore.application?.version} /> |
|||
<DevToolsStat |
|||
label="Client load time" |
|||
value={`${$appStore.clientLoadTime} ms`} |
|||
/> |
|||
<DevToolsStat label="App layouts" value={$screenStore.layouts?.length || 0} /> |
|||
<DevToolsStat label="Active layout" value={$screenStore.activeLayout?.name} /> |
|||
<DevToolsStat label="App screens" value={$screenStore.screens?.length || 0} /> |
|||
<DevToolsStat |
|||
label="Active screen" |
|||
value={$screenStore.activeScreen?.routing.route} |
|||
/> |
|||
<DevToolsStat label="User" value={$authStore.email} /> |
|||
<DevToolsStat label="Role" value={$authStore.roleId} /> |
|||
</Layout> |
|||
@ -0,0 +1,65 @@ |
|||
import { get, writable, derived } from "svelte/store" |
|||
import Manifest from "manifest.json" |
|||
import { findComponentById, findComponentPathById } from "../utils/components" |
|||
import { devToolsStore } from "./devTools" |
|||
import { screenStore } from "./screens" |
|||
import { builderStore } from "./builder" |
|||
|
|||
const createComponentStore = () => { |
|||
const store = writable({}) |
|||
|
|||
const derivedStore = derived( |
|||
[builderStore, devToolsStore, screenStore], |
|||
([$builderState, $devToolsState, $screenState]) => { |
|||
// Avoid any of this logic if we aren't in the builder preview
|
|||
if (!$builderState.inBuilder && !$devToolsState.visible) { |
|||
return {} |
|||
} |
|||
|
|||
// Derive the selected component instance and definition
|
|||
let asset |
|||
const { layout, screen, previewType, selectedComponentId } = $builderState |
|||
if ($builderState.inBuilder) { |
|||
asset = previewType === "layout" ? layout : screen |
|||
} else { |
|||
asset = $screenState.activeScreen |
|||
} |
|||
const component = findComponentById(asset?.props, selectedComponentId) |
|||
const prefix = "@budibase/standard-components/" |
|||
const type = component?._component?.replace(prefix, "") |
|||
const definition = type ? Manifest[type] : null |
|||
|
|||
// Derive the selected component path
|
|||
const path = |
|||
findComponentPathById(asset?.props, selectedComponentId) || [] |
|||
|
|||
return { |
|||
selectedComponentInstance: get(store)[selectedComponentId], |
|||
selectedComponent: component, |
|||
selectedComponentDefinition: definition, |
|||
selectedComponentPath: path?.map(component => component._id), |
|||
} |
|||
} |
|||
) |
|||
|
|||
const registerInstance = (id, instance) => { |
|||
store.update(state => ({ |
|||
...state, |
|||
[id]: instance, |
|||
})) |
|||
} |
|||
|
|||
const unregisterInstance = id => { |
|||
store.update(state => { |
|||
delete state[id] |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
...derivedStore, |
|||
actions: { registerInstance, unregisterInstance }, |
|||
} |
|||
} |
|||
|
|||
export const componentStore = createComponentStore() |
|||
@ -0,0 +1,47 @@ |
|||
import { get } from "svelte/store" |
|||
import { localStorageStore } from "builder/src/builderStore/store/localStorage" |
|||
import { appStore } from "./app" |
|||
import { initialise } from "./initialise" |
|||
import { authStore } from "./auth" |
|||
|
|||
const initialState = { |
|||
visible: false, |
|||
allowSelection: false, |
|||
role: null, |
|||
} |
|||
|
|||
const createDevToolStore = () => { |
|||
const localStorageKey = `${get(appStore).appId}.devTools` |
|||
const store = localStorageStore(localStorageKey, initialState) |
|||
|
|||
const setVisible = visible => { |
|||
store.update(state => ({ |
|||
...state, |
|||
visible: visible, |
|||
})) |
|||
} |
|||
|
|||
const setAllowSelection = allowSelection => { |
|||
store.update(state => ({ |
|||
...state, |
|||
allowSelection, |
|||
})) |
|||
} |
|||
|
|||
const changeRole = async role => { |
|||
store.update(state => ({ |
|||
...state, |
|||
role: role === "self" ? null : role, |
|||
})) |
|||
// location.reload()
|
|||
await authStore.actions.fetchUser() |
|||
await initialise() |
|||
} |
|||
|
|||
return { |
|||
subscribe: store.subscribe, |
|||
actions: { setVisible, setAllowSelection, changeRole }, |
|||
} |
|||
} |
|||
|
|||
export const devToolsStore = createDevToolStore() |
|||
Loading…
Reference in new issue