Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build UI builder with live svelte #80

Merged
merged 151 commits into from
Apr 1, 2024
Merged
Changes from all commits
Commits
Show all changes
151 commits
Select commit Hold shift + click to select a range
9592d31
Use live_svelte for UI builder
cibernox Sep 29, 2023
a2fb105
This worked
cibernox Nov 10, 2023
44e5bcb
better, but still not working
cibernox Nov 10, 2023
18df479
mix format
cibernox Dec 1, 2023
0beffea
temp workaround to unblock new pages
leandrocp Nov 10, 2023
5901995
update Beacon to handle nil templates
leandrocp Nov 10, 2023
67e8505
Almost working but not yet
cibernox Nov 10, 2023
1db4c3a
Page renders, but I can't get the components
cibernox Nov 10, 2023
2253e6e
Fix extra div after merge conflict
cibernox Dec 1, 2023
83e66d1
Components load
cibernox Dec 1, 2023
4b115ae
Visual editor works on both new and edit pages
cibernox Dec 1, 2023
b10a4d0
Changes in visual model are saved to the URL
cibernox Dec 15, 2023
9741cf3
Save form data when changing between visual editor and code editor
cibernox Dec 15, 2023
901685a
move visual mode handle event to the current process
leandrocp Dec 15, 2023
56a95ec
Merge branch 'build-ui-builder-with-live-svelte' of github.com:Beacon…
cibernox Dec 15, 2023
2a92232
generate the current stylesheet for the page being edited
leandrocp Jan 8, 2024
8b4a9a7
small fixes
leandrocp Jan 10, 2024
5cc028d
mix format
leandrocp Jan 10, 2024
d3e1f57
do not save the page on every change
leandrocp Jan 11, 2024
4356c49
update ast (visual editor) after changes on the code editor
leandrocp Jan 11, 2024
8ee6614
remove unnecessary query param
leandrocp Jan 11, 2024
855063a
clean up
leandrocp Jan 11, 2024
646045e
update New
leandrocp Jan 11, 2024
28fadb4
remove unused fn
leandrocp Jan 11, 2024
0e31412
update beacon
leandrocp Jan 11, 2024
ed0cac9
make dialyzer happy
leandrocp Jan 11, 2024
04365bf
mix format
leandrocp Jan 11, 2024
3e5b866
Different approach to visual editor form (#99)
cibernox Jan 12, 2024
f7e093d
Refactor form component and remove debug logging
cibernox Jan 12, 2024
7561e8f
Try to persist the visual mode
cibernox Jan 12, 2024
d110bcd
Visual_mode query parameter works again
cibernox Jan 12, 2024
b4e39c6
This should be working but it's not
cibernox Jan 15, 2024
9c70812
Save some progress (finally)
cibernox Jan 15, 2024
73b967e
format
leandrocp Jan 15, 2024
9862b5d
fix 2-way sync and refactor visual_mode query param
leandrocp Jan 15, 2024
ab33df2
WIP: fix 2-way sync in the New live view
leandrocp Jan 15, 2024
a446f40
Fix a couple warnings
cibernox Jan 16, 2024
0bbcec4
refresh page stylesheet on every change
leandrocp Jan 16, 2024
f908044
WIP: New and Edit
leandrocp Jan 18, 2024
67f4571
fix test and clean up
leandrocp Jan 18, 2024
3679e01
Try to use shadow-dom for the editor
cibernox Jan 19, 2024
5893b85
Seems to work
cibernox Jan 19, 2024
515a887
Remove commented code
cibernox Jan 20, 2024
dc123fd
do not compile ast on every keystroke
leandrocp Jan 25, 2024
c1d2bb3
mark unused arg
leandrocp Jan 25, 2024
21ab158
Fix some frontend issues
cibernox Jan 26, 2024
e1e2089
include layout template in the generated page stylesheet
leandrocp Jan 26, 2024
c028690
New blog post about LiveSvelte / Beacon
cibernox Jan 26, 2024
59f597d
Merge branch 'build-ui-builder-with-live-svelte' of github.com:Beacon…
cibernox Feb 2, 2024
3a04275
Push some fixes
cibernox Feb 2, 2024
62980d9
Commend viewport selector placeholder
cibernox Feb 2, 2024
779148b
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Feb 8, 2024
62e1a12
assets.build
leandrocp Feb 8, 2024
a810f73
remove commented code and mix format
leandrocp Feb 8, 2024
7f28b3c
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Feb 8, 2024
c0bf181
deps.get
leandrocp Feb 8, 2024
d6c2dfb
mix setup
leandrocp Feb 8, 2024
93b545a
mix setup - remove duplicated step
leandrocp Feb 8, 2024
2f5640b
fix svelte component loading
leandrocp Feb 8, 2024
fff7602
load site stylesheet from cache
leandrocp Feb 8, 2024
dbc605a
add site stylesheet store
leandrocp Feb 8, 2024
3ee4779
Style Components sidebar menu
pursuitofleisure Feb 9, 2024
d90dc06
Initial right sidebar styling
pursuitofleisure Feb 12, 2024
0ba257a
Fix sticky position issues
pursuitofleisure Feb 13, 2024
f81dead
Add tooltip for up one level icon
pursuitofleisure Feb 13, 2024
c067a2a
First styling pass - edit buttons
pursuitofleisure Feb 13, 2024
9bddd80
Update edit/move up/move down section
pursuitofleisure Feb 14, 2024
32ded1c
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Feb 16, 2024
c37629e
assets.build
leandrocp Feb 16, 2024
707995b
update beacon
leandrocp Feb 16, 2024
34f0f7a
fix live data
leandrocp Feb 19, 2024
610bd03
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Feb 20, 2024
11f3ec8
Accessibility updates for properties sidebar
pursuitofleisure Feb 20, 2024
c3c99f9
Add overflow-y to Properties sidebar
pursuitofleisure Feb 21, 2024
9ecb3e7
Fix draggable issue in Chrome
pursuitofleisure Feb 21, 2024
204389c
fix fn call to show element ast
leandrocp Feb 21, 2024
3ef5bea
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Feb 23, 2024
4c92279
Add a safe accessor
cibernox Feb 23, 2024
86fc45d
Add temp image fallback url for components
pursuitofleisure Feb 26, 2024
5d4531f
assets.build
leandrocp Feb 28, 2024
44ecbd2
assets.deploy
leandrocp Feb 28, 2024
3e1f975
do not digest assets files
leandrocp Feb 28, 2024
19482a2
assets.build
leandrocp Feb 28, 2024
bf04d34
assets controller load minified js only on prod
leandrocp Feb 28, 2024
a676f3c
remove console.log
leandrocp Feb 28, 2024
b1b41ab
format all and check on CI
leandrocp Feb 28, 2024
ab35fc5
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Feb 28, 2024
f1e5db1
update npm deps
leandrocp Feb 28, 2024
ace76d1
format svelte
leandrocp Feb 28, 2024
001e405
fix CI format cmd
leandrocp Feb 28, 2024
d794763
CI - install prettier on quality job
leandrocp Feb 28, 2024
3767aa3
CI test
leandrocp Feb 28, 2024
b95a742
only build page ast if format is :heex
leandrocp Mar 1, 2024
4d37138
add http endpoints to return both site and page stylesheets
leandrocp Mar 1, 2024
c975ce5
WIP: load stylesheets from admin endpoint
leandrocp Mar 1, 2024
8f1b0a4
build assets
leandrocp Mar 1, 2024
945c728
calculate hash
leandrocp Mar 1, 2024
c8b1081
Simplify generating the stylesheets
cibernox Mar 1, 2024
c92d0d1
Fix styles
cibernox Mar 1, 2024
f1df8d6
Disable pointer events for before/after pseudo elements by default
cibernox Mar 1, 2024
1b031de
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Mar 5, 2024
df49d47
up beacon
leandrocp Mar 5, 2024
15106c1
Fetch page css for visual editor
leandrocp Mar 6, 2024
c7109d9
only generate site stylesheet once
leandrocp Mar 6, 2024
f8be149
assets build
leandrocp Mar 6, 2024
4ba3a91
do not regenerate site stylesheet on page changes
leandrocp Mar 6, 2024
1c06362
remove pages from site stylesheet
leandrocp Mar 6, 2024
4fc8bd6
fix current hash
leandrocp Mar 6, 2024
ccf1da5
clean up
leandrocp Mar 6, 2024
af341ea
update beacon
leandrocp Mar 6, 2024
6810d8a
Fix bug selecting eex_blocks. Allow to edit their condition
cibernox Mar 7, 2024
90a82ee
Add warning message explaining the eex_blocks can't yet be edited usi…
cibernox Mar 7, 2024
c4aa1b6
merge all templates into one stylesheet to avoid conflicts
leandrocp Mar 7, 2024
5706ae4
keep 2 stylesheets: previous and current
leandrocp Mar 7, 2024
75aa481
assets
leandrocp Mar 7, 2024
cb2c798
also keep the original stylesheet so we avoid fouc when removing elem…
leandrocp Mar 7, 2024
e24135a
assets
leandrocp Mar 7, 2024
bf6ff27
remove site stylesheet
leandrocp Mar 7, 2024
b1ed49d
server 2 assets/css endpoints
leandrocp Mar 8, 2024
9c8375d
format & build
leandrocp Mar 8, 2024
01fa20a
Rename CSS used in page builder
leandrocp Mar 8, 2024
7c118b2
Send event when classes are added and fix editing the arg of eex_blocks
cibernox Mar 8, 2024
3bbb0d8
update css chunks sent by svelte app
leandrocp Mar 14, 2024
5022e7d
fix class attribution
leandrocp Mar 15, 2024
fd76556
format and build assets
leandrocp Mar 15, 2024
bf78b78
WIP: jit-browser-tailwindcss
leandrocp Mar 22, 2024
d4cdd9d
Store wrapper element
cibernox Mar 22, 2024
523a3d7
generate tailwind styles
leandrocp Mar 22, 2024
ae1243b
Works for the first try
cibernox Mar 22, 2024
2082beb
Seems to work
cibernox Mar 22, 2024
5b97fdf
format & build assets
leandrocp Mar 22, 2024
2e5ab44
Remove unnecessary code, compile tailwind using our config
cibernox Mar 22, 2024
39e26ef
clean up
leandrocp Mar 26, 2024
daa82dc
load site's custom tailwind config
leandrocp Mar 26, 2024
46620a5
hard code tailwind config example
leandrocp Mar 27, 2024
b8f5371
assets
leandrocp Mar 27, 2024
38fb744
Add Runtime.config/1
leandrocp Mar 27, 2024
81c92e1
fetch tailwind config
leandrocp Mar 27, 2024
12e9ff4
Import dynamic config
cibernox Mar 27, 2024
4df94a4
format
leandrocp Mar 27, 2024
59325f0
assets
leandrocp Mar 27, 2024
de6dfbc
include custom site stylesheet in tailwind css
leandrocp Mar 27, 2024
336b0b4
typo
leandrocp Mar 27, 2024
a702a05
fix old code
leandrocp Mar 27, 2024
1ab425d
clean up
leandrocp Mar 27, 2024
608a529
cleanup
leandrocp Mar 27, 2024
968011d
update beacon
leandrocp Mar 27, 2024
bcc4cdf
Merge branch 'main' into build-ui-builder-with-live-svelte
leandrocp Apr 1, 2024
02bbd8a
prettier ignore /vendor
leandrocp Apr 1, 2024
883bd92
CI - install prettier
leandrocp Apr 1, 2024
7b83933
unlock unused deps
leandrocp Apr 1, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .dialyzer_ignore.exs
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
[
{"lib/beacon/live_admin/components.ex", :unknown_function}
]
[]
10 changes: 5 additions & 5 deletions .github/workflows/elixir.yml → .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Elixir CI
name: CI

on:
push:
@@ -119,10 +119,10 @@ jobs:

- run: mix deps.get

- run: mix tailwind.install --no-assets

- run: mix compile --warnings-as-errors

- run: mix format --check-formatted
- run: mix assets.setup

- run: mix format.all.check

- run: mix deps.unlock --check-unused
- run: mix deps.unlock --check-unused
12 changes: 12 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -44,3 +44,15 @@ npm-debug.log

# Local iex config
.iex.exs

# Ignore automatically generated Svelte files by the ~V sigil
/assets/svelte/_build/

# Ignore ssr build for svelte.
/priv/svelte/

# Ignore automatically generated Svelte files by the ~V sigil
/assets/svelte/_build/

# Ignore ssr build for svelte.
/priv/svelte/
15 changes: 15 additions & 0 deletions assets/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
module.exports = {
env: {
browser: true,
node: true,
es2021: true,
},
extends: ["eslint:recommended", "prettier"],
globals: {
global: "writable",
},
parserOptions: {
ecmaVersion: 12,
sourceType: "module",
},
}
2 changes: 2 additions & 0 deletions assets/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
css/app.css
/vendor/
6 changes: 6 additions & 0 deletions assets/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
printWidth: 120,
semi: false,
plugins: ["prettier-plugin-svelte"],
overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
}
80 changes: 80 additions & 0 deletions assets/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
const esbuild = require("esbuild")
const sveltePlugin = require("esbuild-svelte")
const importGlobPlugin = require("esbuild-plugin-import-glob").default
const sveltePreprocess = require("svelte-preprocess")

const args = process.argv.slice(2)
const watch = args.includes("--watch")
const deploy = args.includes("--deploy")

let optsClient = {
entryPoints: ["js/beacon_live_admin.js"],
globalName: "BeaconLiveAdmin",
format: "iife",
loader: {
".ttf": "dataurl",
".woff": "dataurl",
".woff2": "dataurl",
},
bundle: true,
minify: deploy,
target: "es2020",
conditions: ["svelte", "browser"],
outfile: deploy ? "../priv/static/beacon_live_admin.min.js" : "../priv/static/beacon_live_admin.js",
logLevel: "info",
sourcemap: "external",
tsconfig: "./tsconfig.json",
plugins: [
importGlobPlugin(),
sveltePlugin({
preprocess: sveltePreprocess(),
compilerOptions: {
dev: !deploy,
hydratable: true,
css: "injected",
customElement: true,
},
}),
],
}

let optsServer = {
entryPoints: ["js/server.js"],
platform: "node",
bundle: true,
minify: deploy,
target: "node19.6.1",
conditions: ["svelte"],
outdir: "../priv/svelte",
logLevel: "info",
sourcemap: "external",
tsconfig: "./tsconfig.json",
plugins: [
importGlobPlugin(),
sveltePlugin({
preprocess: sveltePreprocess(),
compilerOptions: {
dev: !deploy,
hydratable: true,
generate: "ssr",
customElement: true,
},
}),
],
}

esbuild.build(optsServer)

if (watch) {
esbuild
.context(optsClient)
.then((ctx) => {
ctx.watch()
})
.catch((error) => {
console.log(error)
process.exit(1)
})
} else {
esbuild.build(optsClient)
}
2 changes: 1 addition & 1 deletion assets/css/beacon_live_admin.css
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "../../deps/live_monaco_editor/priv/static/live_monaco_editor.min.css";
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");
72 changes: 33 additions & 39 deletions assets/js/beacon_live_admin.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,54 @@
import topbar from "../vendor/topbar"
import { CodeEditorHook } from "../../deps/live_monaco_editor/priv/static/live_monaco_editor.esm"

import { getHooks } from "live_svelte"
import * as Components from "../svelte/**/*.svelte"
let Hooks = {}
Hooks.CodeEditorHook = CodeEditorHook

topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

window.addEventListener("phx:page-loading-start", (_event) => {
topbar.show(300)
})

window.addEventListener("phx:page-loading-stop", (_event) => {
topbar.hide()
})
topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300))
window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide())

window.addEventListener("beacon_admin:clipcopy", (event) => {
const result_id = `${event.target.id}-copy-to-clipboard-result`
const el = document.getElementById(result_id);
const el = document.getElementById(result_id)

if ("clipboard" in navigator) {
if (event.target.tagName === "INPUT") {
txt = event.target.value;
txt = event.target.value
} else {
txt = event.target.textContent;
txt = event.target.textContent
}

navigator.clipboard.writeText(txt).then(() => {
el.innerText = 'Copied to clipboard';
// Make it visible
el.classList.remove('invisible', 'text-red-500', 'opacity-0');
// Fade in and translate upwards
el.classList.add('text-green-500', 'opacity-100', '-translate-y-2');

setTimeout(function() {
el.classList.remove('text-green-500', 'opacity-100', '-translate-y-2');
el.classList.add('invisible', 'text-red-500', 'opacity-0');
}, 2000);

}).catch(() => {
el.innerText = 'Could not copy';
// Make it visible
el.classList.remove('invisible', 'text-green-500', 'opacity-0');
// Fade in and translate upwards
el.classList.add('text-red-500', 'opacity-100', '-translate-y-2');
})
navigator.clipboard
.writeText(txt)
.then(() => {
el.innerText = "Copied to clipboard"
// Make it visible
el.classList.remove("invisible", "text-red-500", "opacity-0")
// Fade in and translate upwards
el.classList.add("text-green-500", "opacity-100", "-translate-y-2")

setTimeout(function () {
el.classList.remove("text-green-500", "opacity-100", "-translate-y-2")
el.classList.add("invisible", "text-red-500", "opacity-0")
}, 2000)
})
.catch(() => {
el.innerText = "Could not copy"
// Make it visible
el.classList.remove("invisible", "text-green-500", "opacity-0")
// Fade in and translate upwards
el.classList.add("text-red-500", "opacity-100", "-translate-y-2")
})
} else {
alert(
"Sorry, your browser does not support clipboard copy."
);
alert("Sorry, your browser does not support clipboard copy.")
}
});
})

let socketPath = document.querySelector("html").getAttribute("phx-socket") || "/live"
let csrfToken = document .querySelector("meta[name='csrf-token']") .getAttribute("content")
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveView.LiveSocket(socketPath, Phoenix.Socket, {
hooks: Hooks,
hooks: { ...getHooks(Components), ...Hooks },
params: { _csrf_token: csrfToken },
})
liveSocket.connect()
4 changes: 4 additions & 0 deletions assets/js/server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import * as Components from "../svelte/**/*.svelte"
import { getRender } from "live_svelte"

export const render = getRender(Components)
Loading
Loading