From 18d9dbe668a8e301d7f85b1a3c380820bc024d52 Mon Sep 17 00:00:00 2001 From: JensLincke Date: Thu, 7 Dec 2023 11:10:40 +0100 Subject: [PATCH 1/6] misc SQUASHED: SQUASHED-AUTO-COMMIT-src-external-code-mirror-lib-codemirror.css, From 51249a53d413dbaf32f9efd73fb0a859e1f8d1d4 Mon Sep 17 00:00:00 2001 From: JensLincke Date: Thu, 7 Dec 2023 11:26:01 +0100 Subject: [PATCH 2/6] sandblocks_dev SQUASHED: sandblocks_dev.js, --- demos/domain-code/index.md | 3 - doc/domain-code/index.md | 10 ++ src/client/sandblocks-dev.js | 75 +++++++++++ src/components/tools/domain-code-editor.html | 18 +++ src/components/tools/domain-code-editor.js | 131 +++++++++++++++++++ 5 files changed, 234 insertions(+), 3 deletions(-) delete mode 100644 demos/domain-code/index.md create mode 100644 doc/domain-code/index.md create mode 100644 src/client/sandblocks-dev.js create mode 100644 src/components/tools/domain-code-editor.html create mode 100644 src/components/tools/domain-code-editor.js diff --git a/demos/domain-code/index.md b/demos/domain-code/index.md deleted file mode 100644 index a3ed28a0a..000000000 --- a/demos/domain-code/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Domain Code Project - -[domain-code-explorer](edit://src/components/tools/domain-code-explorer.js) ([open](open://domain-code-explorer)) \ No newline at end of file diff --git a/doc/domain-code/index.md b/doc/domain-code/index.md new file mode 100644 index 000000000..26da517cf --- /dev/null +++ b/doc/domain-code/index.md @@ -0,0 +1,10 @@ +# Domain Code Project + +- [domain-code-explorer](edit://src/components/tools/domain-code-explorer.js) ([open](open://domain-code-explorer)) + + +## TODO + +- Editor Shards +- Replace booleon with checkboxes query + diff --git a/src/client/sandblocks-dev.js b/src/client/sandblocks-dev.js new file mode 100644 index 000000000..6e98a0a5d --- /dev/null +++ b/src/client/sandblocks-dev.js @@ -0,0 +1,75 @@ +/*MD +# Sandblock Dev Hacks... + +MD*/ +import * as cop from "src/client/ContextJS/src/contextjs.js" + +/* globals SandblocksComponentProxies */ + +if (!window.SandblocksComponentProxies) { + window.SandblocksComponentProxies = new Map() +} + +export let SandblocksLayer = cop.layer(window, "SandblocksLayer") + +let _log = function(...args) { + console.log("sandblock custom element: ", ...args) +} + +SandblocksLayer.refineObject( window.customElements, { + define(componentName, aClass) { + var proxy = SandblocksComponentProxies.get(componentName) + if (!proxy) { + proxy = class extends HTMLElement { + static get name() { + return componentName + } + + // static observedAttributes = ["text"] + static get observedAttributes() { + debugger + return this.__proto__.observedAttributes + } + + + // TODO do we really still need this? + connectedCallback( args) { + _log('connectedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.connectedCallback) { + return this.constructor.__proto__.prototype.connectedCallback.apply(this, args) + } + } + disconnectedCallback(...args) { + _log('disconnectedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.disconnectedCallback) { + return this.constructor.__proto__.prototype.disconnectedCallback.apply(this, args) + } + } + // TODO does not get called... + attributeChangedCallback(...args) { + _log('attributeChangedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.attributeChangedCallback) { + return this.constructor.__proto__.prototype.attributeChangedCallback.apply(this, args) + } + } + adoptedCallback(...args) { + _log('adoptedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.adoptedCallback) { + return this.constructor.__proto__.prototype.adoptedCallback.apply(this, args) + } + } + } + SandblocksComponentProxies.set(componentName, proxy) + proxy.__proto__ = aClass + proxy.prototype.__proto__ = aClass.prototype + cop.withoutLayers([SandblocksLayer], () => { + cop.proceed(componentName, proxy) + }) + } else { + // do nothing + proxy.__proto__ = aClass + proxy.prototype.__proto__ = aClass.prototype + } + } +}) + diff --git a/src/components/tools/domain-code-editor.html b/src/components/tools/domain-code-editor.html new file mode 100644 index 000000000..8a24ebfd4 --- /dev/null +++ b/src/components/tools/domain-code-editor.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/src/components/tools/domain-code-editor.js b/src/components/tools/domain-code-editor.js new file mode 100644 index 000000000..ba1966ae7 --- /dev/null +++ b/src/components/tools/domain-code-editor.js @@ -0,0 +1,131 @@ +/*MD # Domain Code Editor + +MD*/ + +import Morph from 'src/components/widgets/lively-morph.js'; +import SyntaxChecker from 'src/client/syntax.js' +import { uuid as generateUUID, debounce, flatmap, executeAllTestRunners, promisedEvent, loc, range } from 'utils'; + +import {DomainObject, TreeSitterDomainObject, LetSmilyReplacementDomainObject, ConstSmilyReplacementDomainObject} from "src/client/domain-code.js" + +export default class DomainCodeEditor extends Morph { + + /*MD ## UI Accessing MD*/ + + get container() { return this.get("#content")} + + + /*MD ## Initialization MD*/ + + async initialize() { + this.windowTitle = "Domain Code Editor"; + + + this.livelyCodeMirror = await () + this.appendChild(this.livelyCodeMirror) + if (this._source) { + this.source = this._source + delete this._source + } + + this.initializeSource() + + // await this.livelyCodeMirror.editorLoaded() + var codeMirror = this.livelyCodeMirror.editor + codeMirror.on("cursorActivity", (cm) => { + this.onEditorCursorActivity(cm) + }) + + + var debouncedChange = (() => { + this.onDomainCodeChanged() + })::debounce(200) + + this.livelyCodeMirror.addEventListener("domain-code-changed", debouncedChange) + + } + + get source() { + if (this.livelyCodeMirror) { + return this.livelyCodeMirror.value + } + return this._source + } + + set source(s) { + if (this.livelyCodeMirror) { + this.livelyCodeMirror.value = s + } else { + this._source = s + } + } + + + async initializeSource() { + let source = this.source + this.lastSource = source + + this.domainObject = TreeSitterDomainObject.fromSource(source) + this.domainObject.replaceType('let', LetSmilyReplacementDomainObject) + this.domainObject.replaceType('const', ConstSmilyReplacementDomainObject) + + this.domainObject.livelyCodeMirror = this.livelyCodeMirror + this.domainObject.updateReplacements() + } + + + onEditorCursorActivity(cm) { + // var from = cm.getCursor(true) + // var to = cm.getCursor(false) + } + + onDomainCodeChanged() { + + if (this.lastSource == this.livelyCodeMirror.getText()) return + + var newSource = this.editor.getText() + this.sourceEditor.setText(newSource) + + DomainObject.edit(this.domainObject, newSource, undefined, { + newAST: (ast) => { + + this.astInspector.inspect(ast.rootNode); + } + }) + + this.domainObject.updateReplacements() + this.domainObjectInspector.inspect(this.domainObject) + + } + + onDomainUpdateButton() { + lively.notify("update") + this.domainObjectInspector.inspect(this.domainObjectInspector.targetObject) + } + + onDomainGraphButton() { + lively.openMarkdown(lively4url + "/src/components/tools/domain-code-graph.md", + "Domain Code Graph", {domainObject: this.domainObject}) + } + + + async save() { + if (this.sourceURL) { + await this.sourceEditor.saveFile(); + } + this.update(); + } + + /*MD ## Lively Integration MD*/ + + livelyPrepareSave() { + } + + livelyMigrate(other) { + + } + + async livelyExample() { + this.source = "let a = 3 + 4" + } +} \ No newline at end of file From 00bfec99520124b80522d500339c7175545d6d97 Mon Sep 17 00:00:00 2001 From: JensLincke Date: Thu, 7 Dec 2023 14:54:17 +0100 Subject: [PATCH 3/6] big component loader refactoring SQUASHED: big-component-loader-refactoring, --- .../babylonian-programming-editor.js | 2 +- src/client/graphics.js | 3 +- src/client/morphic/component-loader.js | 177 +++++++----------- .../basic/aexpr-graph/aexpr-graph.js | 2 +- .../components/basic/aexpr-monitor.js | 2 +- .../components/basic/aexpr-timeline.js | 2 +- .../reactive/components/basic/rx-drawboard.js | 2 +- .../conduit/rpComponents/link-rp19.js | 4 +- .../conduit/rpComponents/reactiveMorph.js | 4 +- .../conduit/rpComponents/router-rp19.js | 8 +- .../conduit/src/components/app-rp19.js | 4 +- .../conduit/src/components/article-rp19.js | 4 +- .../conduit/src/components/editor-rp19.js | 4 +- .../conduit/src/components/home-rp19.js | 4 +- .../conduit/src/components/login-rp19.js | 4 +- .../conduit/src/components/main-view-rp19.js | 4 +- .../conduit/src/components/profile-rp19.js | 4 +- .../conduit/src/components/register-rp19.js | 4 +- .../conduit/src/components/settings-rp19.js | 4 +- .../components/rewritten/cop22-demo.js | 4 +- .../components/rewritten/jumping-cubes.js | 2 +- .../components/rewritten/matches-in-shadow.js | 4 +- .../components/rewritten/poll-component.js | 2 +- .../components/rewritten/text-editor.js | 2 +- .../rewritten/thermostat-component.js | 2 +- src/client/reactive/rp19-jsx/rp19-jsx.js | 22 +-- src/client/sandblocks-dev.js | 75 -------- src/components/demo/interpreter-playground.js | 4 +- src/components/demo/lively-bouncing-ball.js | 4 +- src/components/demo/lively-digital-clock.js | 20 +- src/components/demo/lively-petrinet.js | 2 +- .../demo/lively-simulation-chart-view.js | 4 +- src/components/demo/lively-simulation-code.js | 4 +- .../demo/lively-simulation-controller.js | 2 +- .../demo/lively-simulation-log-view.js | 4 +- src/components/demo/lively-simulation.js | 4 +- src/components/demo/movie-listing.js | 2 +- .../draft/lively-application-bar.js | 2 +- src/components/draft/lively-network.html | 4 +- src/components/draft/lively-object-editor.js | 4 +- src/components/draft/lively-tab-view.js | 4 +- src/components/draft/lively-treeview.js | 2 +- .../halo/lively-halo-connectors-item.js | 4 +- src/components/tools/literature-listing.js | 2 +- .../tools/lively-connection-editor.js | 2 +- src/components/tools/lively-debugger.js | 2 +- src/components/tools/lively-services.js | 2 +- src/components/tools/lively-shadama-editor.js | 2 +- src/components/tools/lively-snapshot-view.js | 8 +- src/components/widgets/keyevent-display.js | 4 +- .../widgets/lively-change-indicator.js | 2 +- src/components/widgets/lively-code-mirror.js | 4 +- src/components/widgets/lively-drawboard.js | 2 +- src/components/widgets/lively-drawio.js | 4 +- src/components/widgets/lively-file.js | 2 +- .../widgets/lively-key-value-input.js | 2 +- .../widgets/lively-key-value-map.js | 2 +- src/components/widgets/lively-script.js | 2 +- src/components/widgets/lively-tabs-wrapper.js | 2 +- src/components/widgets/lively-window.js | 4 +- .../widgets/persistent-code-widget.js | 4 +- templates/tps-node.js | 2 +- 62 files changed, 184 insertions(+), 295 deletions(-) delete mode 100644 src/client/sandblocks-dev.js diff --git a/src/babylonian-programming-editor/babylonian-programming-editor.js b/src/babylonian-programming-editor/babylonian-programming-editor.js index 1c4709529..66049b323 100644 --- a/src/babylonian-programming-editor/babylonian-programming-editor.js +++ b/src/babylonian-programming-editor/babylonian-programming-editor.js @@ -161,7 +161,7 @@ export default class BabylonianProgrammingEditor extends Morph { } - detachedCallback() { + disconnectedCallback() { BabylonianManager.unregisterEditor(this) } diff --git a/src/client/graphics.js b/src/client/graphics.js index 8254bf94f..7ff7c27ef 100644 --- a/src/client/graphics.js +++ b/src/client/graphics.js @@ -1,9 +1,10 @@ +"disable deepeval" + // import { num, string, grid } from "lively.lang"; // import { cssLengthToPixels } from "./convert-css-length.js"; /* copied from lively.graphics and removed dependency to lively.lang */ - export class Point { static ensure(duck) { diff --git a/src/client/morphic/component-loader.js b/src/client/morphic/component-loader.js index 21ea61b40..e15f25105 100644 --- a/src/client/morphic/component-loader.js +++ b/src/client/morphic/component-loader.js @@ -27,20 +27,6 @@ export function register(componentName, template, prototype) { return ComponentLoader.register(componentName, template, prototype); } -/* #FutureWork should interactive state change of "(module) global" state be preserved while reloading / developing modules - ComponentLoader.foo = 3 - ComponentLoader.foo - -#Discussion - -pro) expected in Smalltalk-like developent and live-programmning experience -contra) gap between development-time and runtime (those manualy changes could make something work that without it won't...) - -synthese) if modules and classes are also objects that can have run-time-specific state they should be migrated the same as objects. - -*/ - - export default class ComponentLoader { @@ -131,36 +117,6 @@ export default class ComponentLoader { this._livelyLoadingDep } - static async onAttachedCallback(object, componentName) { - - if (this._livelyLoading) { - await this._livelyLoading // should we provicde this robustness here? Or should these be more pure metal... - } - - _log("onAttachedCallback " + componentName) - - if (object.attachedCallback && - ComponentLoader.proxies[componentName].attachedCallback != object.attachedCallback) { - object.attachedCallback.call(object); - } else if (ComponentLoader.prototypes[componentName].attachedCallback) { - ComponentLoader.prototypes[componentName].attachedCallback.call(object); - } - } - - static async onDetachedCallback(object, componentName) { - - if (this._livelyLoading) { - await this._livelyLoading - } - - if (object.detachedCallback - && ComponentLoader.proxies[componentName].detachedCallback != object.detachedCallback) { - object.detachedCallback.call(object); - } else if (ComponentLoader.prototypes[componentName].detachedCallback) { - ComponentLoader.prototypes[componentName].detachedCallback.call(object); - } - } - static applyTemplate(element, componentName) { var template = this.templates[componentName] return this.applyTemplateElement(element, template) @@ -179,7 +135,7 @@ export default class ComponentLoader { }) } } - + // this function registers a custom element, // it is called from the bootstap code in the component templates static async register(componentName, template, aClass, componentUrl) { @@ -195,70 +151,7 @@ export default class ComponentLoader { await lively.fillTemplateStyles(template, "source: " + componentName, componentUrl) } - if (!this.proxies[componentName]) { - proxy = class extends HTMLElement { - static get name() { - return componentName - } - - get _lively4version() { - return 2 - } - - constructor() { - _log("[component loader] Proxy Constructor " + componentName) - - super(); // always call super() first in the constructor. - - ComponentLoader.applyTemplate(this, componentName) - ComponentLoader.onCreatedCallback(this, componentName) - } - - connectedCallback( args) { - _log('connectedCallback ' + componentName ) - - - // return super.connectedCallback(...args) - // super seams to bind early? - ComponentLoader.onAttachedCallback(this, componentName) - if (this.constructor.__proto__.prototype.connectedCallback) { - return this.constructor.__proto__.prototype.connectedCallback.apply(this, args) - } - } - disconnectedCallback(...args) { - _log('diconnectedCallback ' + componentName ) - - // return super.disconnectedCallback(...args) - ComponentLoader.onDetachedCallback(this, componentName) - if (this.constructor.__proto__.prototype.disconnectedCallback) { - return this.constructor.__proto__.prototype.disconnectedCallback.apply(this, args) - } - } - - adoptedCallback(...args) { - _log('adoptedCallback ' + componentName ) - // return super.adoptedCallback(...args) - if (this.constructor.__proto__.prototype.adoptedCallback) { - return this.constructor.__proto__.prototype.adoptedCallback.apply(this, args) - } - } - } - // set the prototype of the proxy the first time - // #Idea: use "extemds aClass" ? - // proxy.__proto__ = aClass - // proxy.prototype.__proto__ = aClass.prototype - - _log("[component loader] define component: " + componentName) - window.customElements.define(componentName, proxy); // #WebComponent #Magic - this.proxies[componentName] = proxy - } else { - proxy = this.proxies[componentName] - - } - - // change the prototype of the proxy - proxy.__proto__ = aClass - proxy.prototype.__proto__ = aClass.prototype + window.customElements.define(componentName, aClass); } // this function loads all unregistered elements, starts looking in lookupRoot, @@ -670,3 +563,69 @@ export default class ComponentLoader { ComponentLoader.load() ComponentLoader.resetTemplatePathCache() + + +if (!window.lively4OriginalCustomElementsDefine) { + window.lively4OriginalCustomElementsDefine = window.customElements.define +} +// poor man's #COP +window.customElements.define = function define(componentName, aClass) { + var proxy = ComponentLoader.proxies[componentName] + if (!proxy) { + proxy = class extends HTMLElement { + + constructor(...args) { + _log("[component loader] Proxy Constructor " + componentName) + + super(...args); // always call super() first in the constructor. + + ComponentLoader.applyTemplate(this, componentName) + ComponentLoader.onCreatedCallback(this, componentName) + } + + static get name() { + return componentName + } + + static get observedAttributes() { + return this.__proto__.observedAttributes + } + // We need to declare these callbacks, because they are early bound... + connectedCallback( args) { + _log('connectedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.connectedCallback) { + return this.constructor.__proto__.prototype.connectedCallback.apply(this, args) + } + } + disconnectedCallback(...args) { + _log('disconnectedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.disconnectedCallback) { + return this.constructor.__proto__.prototype.disconnectedCallback.apply(this, args) + } + } + attributeChangedCallback(...args) { + _log('attributeChangedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.attributeChangedCallback) { + return this.constructor.__proto__.prototype.attributeChangedCallback.apply(this, args) + } + } + adoptedCallback(...args) { + _log('adoptedCallback ' + componentName ) + if (this.constructor.__proto__.prototype.adoptedCallback) { + return this.constructor.__proto__.prototype.adoptedCallback.apply(this, args) + } + } + } + ComponentLoader.proxies[componentName] = proxy + proxy.__proto__ = aClass + proxy.prototype.__proto__ = aClass.prototype + window.lively4OriginalCustomElementsDefine.apply(window.customElements, [componentName, proxy]) + } else { + // do nothing + proxy.__proto__ = aClass + proxy.prototype.__proto__ = aClass.prototype + } +} + + + diff --git a/src/client/reactive/components/basic/aexpr-graph/aexpr-graph.js b/src/client/reactive/components/basic/aexpr-graph/aexpr-graph.js index bb893604a..f4a91e5a4 100644 --- a/src/client/reactive/components/basic/aexpr-graph/aexpr-graph.js +++ b/src/client/reactive/components/basic/aexpr-graph/aexpr-graph.js @@ -769,7 +769,7 @@ MD*/export default class AexprGraph extends Morph { AExprRegistry.removeEventListener(this); } - detachedCallback() { + disconnectedCallback() { AExprRegistry.removeEventListener(this); } diff --git a/src/client/reactive/components/basic/aexpr-monitor.js b/src/client/reactive/components/basic/aexpr-monitor.js index d73df4e0a..be77711c8 100644 --- a/src/client/reactive/components/basic/aexpr-monitor.js +++ b/src/client/reactive/components/basic/aexpr-monitor.js @@ -173,7 +173,7 @@ export default class AexprTable extends Morph { } - detachedCallback() { + disconnectedCallback() { this.detached = true; } diff --git a/src/client/reactive/components/basic/aexpr-timeline.js b/src/client/reactive/components/basic/aexpr-timeline.js index 7e1542d82..08d2936ee 100644 --- a/src/client/reactive/components/basic/aexpr-timeline.js +++ b/src/client/reactive/components/basic/aexpr-timeline.js @@ -434,7 +434,7 @@ export default class EventDrops extends Morph { this.dataFromSource = other.dataFromSource; } - detachedCallback() { + disconnectedCallback() { this.detached = true; } diff --git a/src/client/reactive/components/basic/rx-drawboard.js b/src/client/reactive/components/basic/rx-drawboard.js index 369ccbac6..4cd5c7e32 100644 --- a/src/client/reactive/components/basic/rx-drawboard.js +++ b/src/client/reactive/components/basic/rx-drawboard.js @@ -234,7 +234,7 @@ export default class LivelyDrawboard extends Morph { this.setAttribute("tabindex", 0); } - attachedCallback() { + connectedCallback() { if (this.parentElement.isWindow) { this.fixedControls = true; this.get("#controls").hidden = false ; diff --git a/src/client/reactive/components/rewritten/conduit/rpComponents/link-rp19.js b/src/client/reactive/components/rewritten/conduit/rpComponents/link-rp19.js index a58ff3cf2..8022a2bb8 100644 --- a/src/client/reactive/components/rewritten/conduit/rpComponents/link-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/rpComponents/link-rp19.js @@ -5,7 +5,7 @@ import { router } from 'src/client/reactive/components/rewritten/conduit/rpCompo export default class Link extends ReactiveMorph { - attachedCallback() { + connectedCallback() { if (this.isDummy()) return; this._innerHTML = this.innerHTML; this.addAExpr(aexpr(() => this.lastChild).onChange(lastChild => { @@ -18,7 +18,7 @@ export default class Link extends ReactiveMorph { .then(htmlDoc => this.differentialUpdate(htmlDoc)) } })); - super.attachedCallback(); + super.connectedCallback(); } onClick(evt) { diff --git a/src/client/reactive/components/rewritten/conduit/rpComponents/reactiveMorph.js b/src/client/reactive/components/rewritten/conduit/rpComponents/reactiveMorph.js index 9d9bf0531..e9e06c4ea 100644 --- a/src/client/reactive/components/rewritten/conduit/rpComponents/reactiveMorph.js +++ b/src/client/reactive/components/rewritten/conduit/rpComponents/reactiveMorph.js @@ -22,12 +22,12 @@ export default class ReactiveMorph extends Morph { } /* component lifecycle */ - attachedCallback() { + connectedCallback() { if(this.isDummy()) return Promise.resolve(); return this.hookRender(); } - detachedCallback() { + disconnectedCallback() { this.disposeAExpr(); } diff --git a/src/client/reactive/components/rewritten/conduit/rpComponents/router-rp19.js b/src/client/reactive/components/rewritten/conduit/rpComponents/router-rp19.js index 7683f3455..f79c88f84 100644 --- a/src/client/reactive/components/rewritten/conduit/rpComponents/router-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/rpComponents/router-rp19.js @@ -12,16 +12,16 @@ class Router extends ReactiveMorph { return this._config || (this._config = {}); } - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; this.attachChildPropsListener(this.children); _router = this; }); } - detachedCallback() { - super.detachedCallback(); + disconnectedCallback() { + super.disconnectedCallback(); if (_router === this) _router = undefined; } diff --git a/src/client/reactive/components/rewritten/conduit/src/components/app-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/app-rp19.js index 681ec2dba..07e6dc7d0 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/app-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/app-rp19.js @@ -6,8 +6,8 @@ import userStore from 'src/client/reactive/components/rewritten/conduit/src/stor export default class App extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; if (!commonStore.token) commonStore.appLoaded = true; diff --git a/src/client/reactive/components/rewritten/conduit/src/components/article-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/article-rp19.js index 2490e34b6..b698ab42d 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/article-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/article-rp19.js @@ -14,8 +14,8 @@ import { router } from 'src/client/reactive/components/rewritten/conduit/rpCompo export default class Article extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; const slug = this.getSlugFromRoutingProps(); articleStore.loadArticle(slug, { acceptCached: true }); diff --git a/src/client/reactive/components/rewritten/conduit/src/components/editor-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/editor-rp19.js index 0a4c9b8b1..e8d764c07 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/editor-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/editor-rp19.js @@ -8,8 +8,8 @@ import ListErrors from 'src/client/reactive/components/rewritten/conduit/src/com export default class Editor extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; this.tagInput = ''; const slug = this.getSlugFromRoutingProps(); diff --git a/src/client/reactive/components/rewritten/conduit/src/components/home-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/home-rp19.js index 6a5ba06ea..a22721848 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/home-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/home-rp19.js @@ -7,8 +7,8 @@ import Tags from 'src/client/reactive/components/rewritten/conduit/src/component export default class Home extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; commonStore.loadTags(); }); diff --git a/src/client/reactive/components/rewritten/conduit/src/components/login-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/login-rp19.js index 145085886..603bfdf5c 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/login-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/login-rp19.js @@ -7,8 +7,8 @@ import ListErrors from 'src/client/reactive/components/rewritten/conduit/src/com export default class Login extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; authStore.reset(); }); diff --git a/src/client/reactive/components/rewritten/conduit/src/components/main-view-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/main-view-rp19.js index 15626a069..91ec799cf 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/main-view-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/main-view-rp19.js @@ -12,8 +12,8 @@ import { router } from 'src/client/reactive/components/rewritten/conduit/rpCompo export default class MainView extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; this.addAExpr( aexpr(() => router().current) diff --git a/src/client/reactive/components/rewritten/conduit/src/components/profile-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/profile-rp19.js index b15d75727..30ec212dd 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/profile-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/profile-rp19.js @@ -12,8 +12,8 @@ import FavoritedArticlesTab from 'src/client/reactive/components/rewritten/condu export default class Profile extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; this.addAExpr( aexpr(() => router().current) diff --git a/src/client/reactive/components/rewritten/conduit/src/components/register-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/register-rp19.js index 172e9e43c..fcd802e33 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/register-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/register-rp19.js @@ -7,8 +7,8 @@ import ListErrors from 'src/client/reactive/components/rewritten/conduit/src/com export default class Register extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; authStore.reset(); });if (this.isDummy()) return; diff --git a/src/client/reactive/components/rewritten/conduit/src/components/settings-rp19.js b/src/client/reactive/components/rewritten/conduit/src/components/settings-rp19.js index ba3d00ef4..af5f5d74e 100644 --- a/src/client/reactive/components/rewritten/conduit/src/components/settings-rp19.js +++ b/src/client/reactive/components/rewritten/conduit/src/components/settings-rp19.js @@ -17,8 +17,8 @@ const EMPTY_USER = { export default class Settings extends ReactiveMorph { - attachedCallback() { - super.attachedCallback().then(() => { + connectedCallback() { + super.connectedCallback().then(() => { if (this.isDummy()) return; this.addAExpr(aexpr(() => userStore.currentUser).onChange(user => this.createLocalUserCopy(user))); diff --git a/src/client/reactive/components/rewritten/cop22-demo.js b/src/client/reactive/components/rewritten/cop22-demo.js index c18c737f5..34fc446c9 100644 --- a/src/client/reactive/components/rewritten/cop22-demo.js +++ b/src/client/reactive/components/rewritten/cop22-demo.js @@ -59,11 +59,11 @@ export default class Cop22Demo extends Morph { return this.get('#isOnline'); } - attachedCallback() { + connectedCallback() { lively.success("%cEdge", "background: steelblue; border-right: 3px red solid; border-radius: 100px;", this); } - detachedCallback() { + disconnectedCallback() { this.aexprs.forEach(ae => ae.dispose()); lively.warn('detached Edge'); diff --git a/src/client/reactive/components/rewritten/jumping-cubes.js b/src/client/reactive/components/rewritten/jumping-cubes.js index 4fb133b2e..09530bb0b 100644 --- a/src/client/reactive/components/rewritten/jumping-cubes.js +++ b/src/client/reactive/components/rewritten/jumping-cubes.js @@ -528,7 +528,7 @@ export default class JumpingCubes extends Morph { return 1; } - detachedCallback() { + disconnectedCallback() { this.disposeBindings(); } diff --git a/src/client/reactive/components/rewritten/matches-in-shadow.js b/src/client/reactive/components/rewritten/matches-in-shadow.js index f781a3fd4..15505085b 100644 --- a/src/client/reactive/components/rewritten/matches-in-shadow.js +++ b/src/client/reactive/components/rewritten/matches-in-shadow.js @@ -30,10 +30,10 @@ export default class MatchesInShadow extends Morph { lively.addEventListener("template", this, "dblclick", evt => this.onDblClick(evt)) } - attachedCallback() { + connectedCallback() { // lively.warn('ADDED') } - detachedCallback() { + disconnectedCallback() { // lively.warn('REMOVED') } attributeChangedCallback(attrName, oldVal, newVal) { diff --git a/src/client/reactive/components/rewritten/poll-component.js b/src/client/reactive/components/rewritten/poll-component.js index 0be65cd79..dd29880e1 100644 --- a/src/client/reactive/components/rewritten/poll-component.js +++ b/src/client/reactive/components/rewritten/poll-component.js @@ -94,7 +94,7 @@ export default class PollComponent extends Morph { return; } - detachedCallback() { + disconnectedCallback() { this.disposeBindings(); } diff --git a/src/client/reactive/components/rewritten/text-editor.js b/src/client/reactive/components/rewritten/text-editor.js index 81ecde498..478196c07 100644 --- a/src/client/reactive/components/rewritten/text-editor.js +++ b/src/client/reactive/components/rewritten/text-editor.js @@ -67,7 +67,7 @@ ${this.flenschKincaidIndex} Sprachlevel (Flensch Kincaid) this.disposeBindings(); } - detachedCallback() { + disconnectedCallback() { this.disposeBindings(); } diff --git a/src/client/reactive/components/rewritten/thermostat-component.js b/src/client/reactive/components/rewritten/thermostat-component.js index 1b58838d5..43edf8b00 100644 --- a/src/client/reactive/components/rewritten/thermostat-component.js +++ b/src/client/reactive/components/rewritten/thermostat-component.js @@ -112,7 +112,7 @@ export default class Thermostat extends Morph { this.fahrenheitLayer.AExprForILA.migrateEvents(this.migratedLayer.AExprForILA); } - detachedCallback() { + disconnectedCallback() { this.disposeBindings(); } diff --git a/src/client/reactive/rp19-jsx/rp19-jsx.js b/src/client/reactive/rp19-jsx/rp19-jsx.js index 09b4a52bb..d622606fc 100644 --- a/src/client/reactive/rp19-jsx/rp19-jsx.js +++ b/src/client/reactive/rp19-jsx/rp19-jsx.js @@ -14,13 +14,13 @@ const getClassMethodByName = (path, name) => /* Bind Input Fields */ const addBindInputFieldsMethodCall = (t, path) => { - const attachedCallback = getClassMethodByName(path, 'attachedCallback'); - const superCall = getSuperAttachedCallback(attachedCallback); + const connectedCallback = getClassMethodByName(path, 'connectedCallback'); + const superCall = getSuperAttachedCallback(connectedCallback); const bindMethodCall = createBindMethodCall(t); if (superCall) superCall.replaceWith(bindMethodCall); else - attachedCallback.get('body').unshiftContainer('body', bindMethodCall); + connectedCallback.get('body').unshiftContainer('body', bindMethodCall); } const createBindMethodCall = t => @@ -30,7 +30,7 @@ const createBindMethodCall = t => t.callExpression( t.memberExpression( t.super(), - t.identifier('attachedCallback') + t.identifier('connectedCallback') ), [] ), @@ -75,7 +75,7 @@ const getSuperAttachedCallback = path => { found = found || parent.isMemberExpression() && parent.parentPath.isCallExpression() && - parent.get('property').node.name === 'attachedCallback' + parent.get('property').node.name === 'connectedCallback' && parent.parentPath; } }); @@ -192,14 +192,14 @@ const createBindingMethod = (t, inputFields) => const createAttachedCallback = t => t.classMethod( 'method', - t.identifier('attachedCallback'), + t.identifier('connectedCallback'), [], t.blockStatement([ t.expressionStatement( t.callExpression( t.memberExpression( t.super(), - t.identifier('attachedCallback') + t.identifier('connectedCallback') ), [] ) @@ -208,7 +208,7 @@ const createAttachedCallback = t => ); const ensureAttachedCallbackExistance = (t, path) => { - if (!getClassMethodByName(path, 'attachedCallback')) { + if (!getClassMethodByName(path, 'connectedCallback')) { path.get('body').unshiftContainer('body', createAttachedCallback(t)); } } @@ -243,9 +243,9 @@ const logRenderToConsole = t => /* Console log for tracing all detached calls */ const addDetachedConsoleLog = (t, path) => { - const detachedCallbackMethod = getClassMethodByName(path, 'detachedCallback'); - if (!detachedCallbackMethod) return; - detachedCallbackMethod.get('body').unshiftContainer('body', logDetachedToConsole(t)); + const disconnectedCallbackMethod = getClassMethodByName(path, 'disconnectedCallback'); + if (!disconnectedCallbackMethod) return; + disconnectedCallbackMethod.get('body').unshiftContainer('body', logDetachedToConsole(t)); } const logDetachedToConsole = t => diff --git a/src/client/sandblocks-dev.js b/src/client/sandblocks-dev.js deleted file mode 100644 index 6e98a0a5d..000000000 --- a/src/client/sandblocks-dev.js +++ /dev/null @@ -1,75 +0,0 @@ -/*MD -# Sandblock Dev Hacks... - -MD*/ -import * as cop from "src/client/ContextJS/src/contextjs.js" - -/* globals SandblocksComponentProxies */ - -if (!window.SandblocksComponentProxies) { - window.SandblocksComponentProxies = new Map() -} - -export let SandblocksLayer = cop.layer(window, "SandblocksLayer") - -let _log = function(...args) { - console.log("sandblock custom element: ", ...args) -} - -SandblocksLayer.refineObject( window.customElements, { - define(componentName, aClass) { - var proxy = SandblocksComponentProxies.get(componentName) - if (!proxy) { - proxy = class extends HTMLElement { - static get name() { - return componentName - } - - // static observedAttributes = ["text"] - static get observedAttributes() { - debugger - return this.__proto__.observedAttributes - } - - - // TODO do we really still need this? - connectedCallback( args) { - _log('connectedCallback ' + componentName ) - if (this.constructor.__proto__.prototype.connectedCallback) { - return this.constructor.__proto__.prototype.connectedCallback.apply(this, args) - } - } - disconnectedCallback(...args) { - _log('disconnectedCallback ' + componentName ) - if (this.constructor.__proto__.prototype.disconnectedCallback) { - return this.constructor.__proto__.prototype.disconnectedCallback.apply(this, args) - } - } - // TODO does not get called... - attributeChangedCallback(...args) { - _log('attributeChangedCallback ' + componentName ) - if (this.constructor.__proto__.prototype.attributeChangedCallback) { - return this.constructor.__proto__.prototype.attributeChangedCallback.apply(this, args) - } - } - adoptedCallback(...args) { - _log('adoptedCallback ' + componentName ) - if (this.constructor.__proto__.prototype.adoptedCallback) { - return this.constructor.__proto__.prototype.adoptedCallback.apply(this, args) - } - } - } - SandblocksComponentProxies.set(componentName, proxy) - proxy.__proto__ = aClass - proxy.prototype.__proto__ = aClass.prototype - cop.withoutLayers([SandblocksLayer], () => { - cop.proceed(componentName, proxy) - }) - } else { - // do nothing - proxy.__proto__ = aClass - proxy.prototype.__proto__ = aClass.prototype - } - } -}) - diff --git a/src/components/demo/interpreter-playground.js b/src/components/demo/interpreter-playground.js index bfdb75098..c0df0273c 100644 --- a/src/components/demo/interpreter-playground.js +++ b/src/components/demo/interpreter-playground.js @@ -140,9 +140,9 @@ fn(o1, o2.func()) return this.lcm3.editor; } - attachedCallback() {} + connectedCallback() {} - detachedCallback() { + disconnectedCallback() { this.stopStepping(); } diff --git a/src/components/demo/lively-bouncing-ball.js b/src/components/demo/lively-bouncing-ball.js index cd1e74ecc..b3754b216 100644 --- a/src/components/demo/lively-bouncing-ball.js +++ b/src/components/demo/lively-bouncing-ball.js @@ -15,11 +15,11 @@ export default class Ball extends Morph { this.registerButtons(); } - attachedCallback() { + connectedCallback() { this.animation = setInterval(() => this.draw(), 20); } - detachedCallback() { + disconnectedCallback() { clearInterval(this.animation); } diff --git a/src/components/demo/lively-digital-clock.js b/src/components/demo/lively-digital-clock.js index b2e7784a4..36fe8e958 100644 --- a/src/components/demo/lively-digital-clock.js +++ b/src/components/demo/lively-digital-clock.js @@ -2,23 +2,22 @@ import Morph from 'src/components/widgets/lively-morph.js'; export default class DigitalClock extends Morph { + static observedAttributes = ["color", "xsize"]; + initialize() { - this.style.backgroundColor = '' if (!this.start) this.start = Date.now() } - attachedCallback() { + connectedCallback() { this.setup(); } attributeChangedCallback(attrName, oldValue, newValue) { - switch (attrName) { - //case 'attribute': - // this.render(); - // break; - default: - // + if (attrName === "color") { + this.get("#time").style.backgroundColor = newValue + } else if (attrName === "xsize") { + this.get("#time").style.fontSize = newValue } } @@ -53,6 +52,11 @@ export default class DigitalClock extends Morph { this.shadowRoot.querySelector("#time").innerHTML = `${this.formatTime(date)} timer: ${Math.round(time / 1000 / 60)}min`; } + + livelyExample() { + this.setAttribute("color", "gray") + } + livelyMigrate(oldInstance) { this.start = oldInstance.start diff --git a/src/components/demo/lively-petrinet.js b/src/components/demo/lively-petrinet.js index aac86323a..38380b4a9 100644 --- a/src/components/demo/lively-petrinet.js +++ b/src/components/demo/lively-petrinet.js @@ -35,7 +35,7 @@ export default class LivelyPetrinet extends Morph { } } - detachedCallback() { + disconnectedCallback() { clearInterval(this.positionUpdate); } diff --git a/src/components/demo/lively-simulation-chart-view.js b/src/components/demo/lively-simulation-chart-view.js index d7b97bb95..4e7ae080a 100644 --- a/src/components/demo/lively-simulation-chart-view.js +++ b/src/components/demo/lively-simulation-chart-view.js @@ -56,11 +56,11 @@ export default class LivelySimulationChartView extends Morph { }); } - attachedCallback() { + connectedCallback() { this.registerVisibilityUpdater(); } - detachedCallback() { + disconnectedCallback() { this.visibilityUpdater.dispose(); } diff --git a/src/components/demo/lively-simulation-code.js b/src/components/demo/lively-simulation-code.js index 3f714093d..6007b9b34 100644 --- a/src/components/demo/lively-simulation-code.js +++ b/src/components/demo/lively-simulation-code.js @@ -50,11 +50,11 @@ export default class LivelySimulationCode extends Morph { discard.addEventListener('click', () => this.handleSaveDiscard(false)); } - attachedCallback() { + connectedCallback() { this.registerCellName(); } - detachedCallback() { + disconnectedCallback() { this.cellNameUpdater.dispose(); } diff --git a/src/components/demo/lively-simulation-controller.js b/src/components/demo/lively-simulation-controller.js index f8cc4085c..1889b6a7a 100644 --- a/src/components/demo/lively-simulation-controller.js +++ b/src/components/demo/lively-simulation-controller.js @@ -70,7 +70,7 @@ export default class LivelySimulationController extends Morph { this.registerTimeDeltaUpdater(engine); } - detachedCallback() { + disconnectedCallback() { if (this.isRunningUpdater) this.isRunningUpdater.dispose(); if (this.velocityUpdater) this.velocityUpdater.dispose(); if (this.stopOnErrorUpdater) this.stopOnErrorUpdater.dispose(); diff --git a/src/components/demo/lively-simulation-log-view.js b/src/components/demo/lively-simulation-log-view.js index 17def07dd..7c0c54e9d 100644 --- a/src/components/demo/lively-simulation-log-view.js +++ b/src/components/demo/lively-simulation-log-view.js @@ -25,11 +25,11 @@ export default class LivelySimulationLogView extends Morph { this.get('#interval').value = interval; } - attachedCallback() { + connectedCallback() { this.registerLogTable(); } - detachedCallback() { + disconnectedCallback() { this.logTableUpdater.dispose(); this.visibilityUpdater.dispose(); } diff --git a/src/components/demo/lively-simulation.js b/src/components/demo/lively-simulation.js index 21dd8a7de..90362bf48 100644 --- a/src/components/demo/lively-simulation.js +++ b/src/components/demo/lively-simulation.js @@ -51,11 +51,11 @@ export default class LivelySimulation extends Morph { this.history = new History(() => this.getInnerHTML()); } - attachedCallback() { + connectedCallback() { this.initializeHistory(); } - detachedCallback() { + disconnectedCallback() { const { engine, history } = this; engine.stop(); history.shutdown(); diff --git a/src/components/demo/movie-listing.js b/src/components/demo/movie-listing.js index 692a4e095..205c93e3d 100644 --- a/src/components/demo/movie-listing.js +++ b/src/components/demo/movie-listing.js @@ -13,7 +13,7 @@ export default class MovieListing extends Morph { }) } - attachedCallback() { + connectedCallback() { this.get("#content").innerHTML = "" var container = lively.query(this, "lively-container"); this.createView(container).then(view => { diff --git a/src/components/draft/lively-application-bar.js b/src/components/draft/lively-application-bar.js index 2222c0c3f..4119ab094 100644 --- a/src/components/draft/lively-application-bar.js +++ b/src/components/draft/lively-application-bar.js @@ -12,7 +12,7 @@ export default class ApplicationBar extends Morph { /* * HTMLElement callbacks */ - attachedCallback() { + connectedCallback() { this.setup(); this.render(); } diff --git a/src/components/draft/lively-network.html b/src/components/draft/lively-network.html index 02e44b968..2da4a66f9 100644 --- a/src/components/draft/lively-network.html +++ b/src/components/draft/lively-network.html @@ -25,7 +25,7 @@
- -