diff --git a/first.html b/first.html new file mode 100755 index 0000000..af04e31 --- /dev/null +++ b/first.html @@ -0,0 +1,38 @@ + + + + + + + + + First page + + + + + + +
+ Second +
+ + + + + + diff --git a/index.html b/index.html index 7c80e79..83f8e85 100755 --- a/index.html +++ b/index.html @@ -5,8 +5,8 @@ - - First page + + First page @@ -117,30 +117,22 @@ --> -
+
+ +
diff --git a/packages/signalizejs/asset-loader/src/index.ts b/packages/signalizejs/asset-loader/src/index.ts index 30a6d82..4b94843 100755 --- a/packages/signalizejs/asset-loader/src/index.ts +++ b/packages/signalizejs/asset-loader/src/index.ts @@ -138,5 +138,5 @@ export default (signalize: Signalize): void => { }) }); - signalize.load = load; + signalize.loadAsset = load; } diff --git a/packages/signalizejs/core/package.json b/packages/signalizejs/core/package.json deleted file mode 100755 index 8fd2d09..0000000 --- a/packages/signalizejs/core/package.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "signalizejs/core", - "main": "./dist/core.cjs", - "module": "./dist/core.js", - "types": "./dist/index.d.ts", - "type": "module", - "sideEffects": false -} diff --git a/packages/signalizejs/core/src/Signalize.ts b/packages/signalizejs/core/src/Signalize.ts deleted file mode 100755 index ebe12a4..0000000 --- a/packages/signalizejs/core/src/Signalize.ts +++ /dev/null @@ -1,88 +0,0 @@ -import AsyncFunctionPlugin from './plugins/AsyncFunction'; -import BindPlugin from './plugins/bind'; -import DispatchPlugin from './plugins/dispatch' -import DomReadyPlugin from './plugins/domReady'; -import MergePlugin from './plugins/merge'; -import ObservePlugin from './plugins/mutation-observer'; -import OnPlugin from './plugins/on'; -import OffPlugin from './plugins/off'; -import RefPlugin from './plugins/ref'; -import ScopePlugin from './plugins/scope'; -import SelectPlugin from './plugins/select'; -import SignalPlugin from './plugins/signal'; -import TaskPlugin from './plugins/task'; - -export * from './plugins/AsyncFunction'; -export * from './plugins/bind'; -export * from './plugins/dispatch' -export * from './plugins/domReady'; -export * from './plugins/merge'; -export * from './plugins/mutation-observer'; -export * from './plugins/on'; -export * from './plugins/off'; -export * from './plugins/ref'; -export * from './plugins/scope'; -export * from './plugins/select'; -export * from './plugins/signal'; -export * from './plugins/task' - -declare global { - interface Window { - Signalize: Signalize - } -} - -export type Plugin = (signalize: Signalize, options?: O) => void; - -export interface SignalizeConfig extends Record { - root: HTMLElement | Document | DocumentFragment - exposeSignalize: boolean - attributesPrefix: string -} - -export class Signalize { - config: SignalizeConfig = { - root: document, - exposeSignalize: true, - attributesPrefix: '' - } - - globals: Record = {} - - constructor (config?: Partial) { - this.#init(config); - } - - use>(plugin: Plugin, options?: O): void { - plugin(this, options); - } - - configure = (config: Partial): void => { - this.config = this.merge(this.config, config) as SignalizeConfig - } - - #init (config?: Partial): void { - this.use(MergePlugin); - - this.config = this.merge(this.config, config ?? {}) as SignalizeConfig; - - this.use(AsyncFunctionPlugin); - this.use(TaskPlugin) - this.use(DomReadyPlugin); - this.use(SelectPlugin); - this.use(DispatchPlugin); - this.use(OnPlugin); - this.use(OffPlugin); - this.use(SignalPlugin); - this.use(ScopePlugin); - this.use(ObservePlugin); - this.use(BindPlugin); - this.use(RefPlugin); - - this.on('dom:ready', () => { - this.observeMutations(this.config.root); - }) - } -} - -export default Signalize; diff --git a/packages/signalizejs/core/src/index.global.ts b/packages/signalizejs/core/src/index.global.ts deleted file mode 100755 index 4446268..0000000 --- a/packages/signalizejs/core/src/index.global.ts +++ /dev/null @@ -1,11 +0,0 @@ -import Signalize from './Signalize'; - -if (window?.Signalize === undefined) { - if (document.currentScript?.hasAttribute('noinit') === false - && document.currentScript?.hasAttribute('data-noinit') === false - ) { - window.Signalize = new Signalize(); - } else { - window.Signalize = Signalize; - } -} diff --git a/packages/signalizejs/core/src/index.ts b/packages/signalizejs/core/src/index.ts deleted file mode 100755 index 36af5de..0000000 --- a/packages/signalizejs/core/src/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Signalize from './Signalize'; -export * from './Signalize'; - -export default Signalize; diff --git a/packages/signalizejs/core/tests/bind.spec.ts b/packages/signalizejs/core/tests/bind.spec.ts deleted file mode 100755 index d0d818e..0000000 --- a/packages/signalizejs/core/tests/bind.spec.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('has title', async ({ page }) => { - await page.goto('/tests.html'); - await expect(page).toHaveTitle('Test'); -}); diff --git a/packages/signalizejs/core/tests/pages/bind.html b/packages/signalizejs/core/tests/pages/bind.html deleted file mode 100755 index 5c88555..0000000 --- a/packages/signalizejs/core/tests/pages/bind.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Test - - - - - diff --git a/packages/signalizejs/directives/src/index.ts b/packages/signalizejs/directives/src/index.ts index 239aff3..f0fedc8 100755 --- a/packages/signalizejs/directives/src/index.ts +++ b/packages/signalizejs/directives/src/index.ts @@ -1,5 +1,5 @@ -import type Signalize from 'signalizejs/core' -import type { CustomEventListener, Scope } from 'signalizejs/core'; +import type Signalize from 'signalizejs' +import type { CustomEventListener, Scope } from 'signalizejs'; declare module '..' { interface Signalize { @@ -190,11 +190,10 @@ export default (signalize: Signalize): void => { if (!(cacheKey in createFunctionCache)) { const functionDataKeys = Object.keys({...globals, ...context}); createFunctionCache[cacheKey] = async function (data) { - let functionData = {...globals, ...data} + let functionData = {signalize, ...globals, ...data} try { return new AsyncFunction('_context', '_element', ` try { - console.log('he'); let { ${functionDataKeys.join(',')} } = _context; ${functionString} } catch(e) { @@ -653,5 +652,4 @@ export default (signalize: Signalize): void => { }) signalize.directive = directive; - } diff --git a/packages/signalizejs/spa/src/index.ts b/packages/signalizejs/spa/src/index.ts index 9fbe80c..b4b1f44 100755 --- a/packages/signalizejs/spa/src/index.ts +++ b/packages/signalizejs/spa/src/index.ts @@ -22,9 +22,15 @@ type StateAction = 'push' | 'replace'; interface VisitData { url: string | URL + scrollX?: number + scrollY?: number stateAction?: StateAction } +interface SpaHistoryState extends Partial { + spa?: true +} + interface SpaDispatchEventData extends VisitData { success?: boolean } @@ -123,10 +129,20 @@ export default (signalize: Signalize): void => { redraw(responseData); } + console.log(data); if (stateAction === 'replace') { window.history.replaceState(window.history.state, '', urlString); } else if (stateAction === 'push') { - window.history.pushState({ spa: true }, '', urlString); + window.history.pushState( + { + url: data.url, + spa: true, + scrollX: data.scrollX ?? window.scrollX, + scrollY: data.scrollY ?? window.scrollY + }, + '', + urlString + ); } if (shouldCacheResponse === null) { @@ -168,7 +184,7 @@ export default (signalize: Signalize): void => { }); } } else { - window.scrollTo(0, 0) + window.scrollTo(data.scrollX ?? 0, data.scrollY ?? 0) } } @@ -182,18 +198,23 @@ export default (signalize: Signalize): void => { } const onPopState = (): void => { - if (typeof window.history.state?.spa !== 'boolean') { + const state = window.history.state as SpaHistoryState; + console.log(state?.spa ?? false); + if (!(state?.spa ?? false)) { return; } + console.log(state); const location = new URL(window.location.href); if (location === currentLocation || (location.pathname === currentLocation.pathname && location.hash !== currentLocation.hash)) { return; } - const visitConfig = { - url: location + const visitConfig: VisitData = { + url: location, + scrollX: state.scrollX, + scrollY: state.scrollY }; dispatch('spa:popstate', visitConfig); @@ -230,7 +251,13 @@ export default (signalize: Signalize): void => { } if (window.history.state === null) { - window.history.replaceState({ spa: true }, '', window.location.href); + window.history.replaceState( + { + spa: true, scrollX: window.scrollX, scrollY: window.scrollY + }, + '', + window.location.href + ); } event.preventDefault(); diff --git a/packages/signalizejs/src/Signalize.ts b/packages/signalizejs/src/Signalize.ts index f899ce2..590257b 100755 --- a/packages/signalizejs/src/Signalize.ts +++ b/packages/signalizejs/src/Signalize.ts @@ -1,5 +1,30 @@ -import { default as SignalizeCore, SignalizeConfig } from 'signalizejs/core'; -import DirectivesPlugin from 'signalizejs/directives'; +import AsyncFunctionPlugin from './plugins/AsyncFunction'; +import BindPlugin from './plugins/bind'; +import DispatchPlugin from './plugins/dispatch' +import DomReadyPlugin from './plugins/domReady'; +import MergePlugin from './plugins/merge'; +import ObservePlugin from './plugins/mutation-observer'; +import OnPlugin from './plugins/on'; +import OffPlugin from './plugins/off'; +import RefPlugin from './plugins/ref'; +import ScopePlugin from './plugins/scope'; +import SelectPlugin from './plugins/select'; +import SignalPlugin from './plugins/signal'; +import TaskPlugin from './plugins/task'; + +export * from './plugins/AsyncFunction'; +export * from './plugins/bind'; +export * from './plugins/dispatch' +export * from './plugins/domReady'; +export * from './plugins/merge'; +export * from './plugins/mutation-observer'; +export * from './plugins/on'; +export * from './plugins/off'; +export * from './plugins/ref'; +export * from './plugins/scope'; +export * from './plugins/select'; +export * from './plugins/signal'; +export * from './plugins/task' declare global { interface Window { @@ -7,33 +32,35 @@ declare global { } } -export class Signalize extends SignalizeCore { - constructor (config?: Partial) { - super(config) - this.#init(); - } +export type Plugin = (signalize: Signalize, options?: O) => void; - #init (): void { - this.use(DirectivesPlugin); - } +export interface SignalizeConfig extends Record { + root: HTMLElement | Document | DocumentFragment + exposeSignalize: boolean + attributesPrefix: string +} + +export type SignalizeGlobals = Record + +export interface SignalizeOptions { + config?: SignalizeConfig + globals?: SignalizeGlobals } -/* export class Signalize { config: SignalizeConfig = { root: document, exposeSignalize: true, - attributesPrefix: '', - directivesSeparator: '-' + attributesPrefix: '' } - globals: Record = {} + globals: SignalizeGlobals = {}; - constructor (config?: Partial) { - this.#init(config); + constructor (options?: Partial) { + this.#init(options); } - use>(plugin: Plugin, options?: O): void { + use = >(plugin: Plugin, options?: O): void => { plugin(this, options); } @@ -41,10 +68,11 @@ export class Signalize { this.config = this.merge(this.config, config) as SignalizeConfig } - #init (config?: Partial): void { + #init = (options?: Partial): void => { this.use(MergePlugin); - this.config = this.merge(this.config, config ?? {}) as SignalizeConfig; + this.globals = this.merge(this.globals, options?.globals ?? {}); + this.config = this.merge(this.config, options?.config ?? {}) as SignalizeConfig; this.use(AsyncFunctionPlugin); this.use(TaskPlugin) @@ -58,7 +86,6 @@ export class Signalize { this.use(ObservePlugin); this.use(BindPlugin); this.use(RefPlugin); - this.use(DirectivePlugin); this.on('dom:ready', () => { this.observeMutations(this.config.root); @@ -67,4 +94,3 @@ export class Signalize { } export default Signalize; - */ diff --git a/packages/signalizejs/src/index.global.ts b/packages/signalizejs/src/index.global.ts index 722bafc..4446268 100755 --- a/packages/signalizejs/src/index.global.ts +++ b/packages/signalizejs/src/index.global.ts @@ -1,4 +1,4 @@ -import { Signalize } from './Signalize'; +import Signalize from './Signalize'; if (window?.Signalize === undefined) { if (document.currentScript?.hasAttribute('noinit') === false diff --git a/packages/signalizejs/src/index.ts b/packages/signalizejs/src/index.ts index 358568a..36af5de 100755 --- a/packages/signalizejs/src/index.ts +++ b/packages/signalizejs/src/index.ts @@ -1,4 +1,4 @@ -import { Signalize } from './Signalize'; +import Signalize from './Signalize'; export * from './Signalize'; export default Signalize; diff --git a/packages/signalizejs/core/src/plugins/AsyncFunction.ts b/packages/signalizejs/src/plugins/AsyncFunction.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/AsyncFunction.ts rename to packages/signalizejs/src/plugins/AsyncFunction.ts diff --git a/packages/signalizejs/core/src/plugins/bind.ts b/packages/signalizejs/src/plugins/bind.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/bind.ts rename to packages/signalizejs/src/plugins/bind.ts diff --git a/packages/signalizejs/core/src/plugins/dispatch.ts b/packages/signalizejs/src/plugins/dispatch.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/dispatch.ts rename to packages/signalizejs/src/plugins/dispatch.ts diff --git a/packages/signalizejs/core/src/plugins/domReady.ts b/packages/signalizejs/src/plugins/domReady.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/domReady.ts rename to packages/signalizejs/src/plugins/domReady.ts diff --git a/packages/signalizejs/core/src/plugins/merge.ts b/packages/signalizejs/src/plugins/merge.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/merge.ts rename to packages/signalizejs/src/plugins/merge.ts diff --git a/packages/signalizejs/core/src/plugins/mutation-observer.ts b/packages/signalizejs/src/plugins/mutation-observer.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/mutation-observer.ts rename to packages/signalizejs/src/plugins/mutation-observer.ts diff --git a/packages/signalizejs/core/src/plugins/off.ts b/packages/signalizejs/src/plugins/off.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/off.ts rename to packages/signalizejs/src/plugins/off.ts diff --git a/packages/signalizejs/core/src/plugins/on.ts b/packages/signalizejs/src/plugins/on.ts similarity index 97% rename from packages/signalizejs/core/src/plugins/on.ts rename to packages/signalizejs/src/plugins/on.ts index 0ab19e4..d3db565 100755 --- a/packages/signalizejs/core/src/plugins/on.ts +++ b/packages/signalizejs/src/plugins/on.ts @@ -43,7 +43,6 @@ export default (signalize: Signalize): void => { }, options); }, remove: (target: HTMLElement | string, listener: CallableFunction, options: AddEventListenerOptions) => { - // TODO on remove on('dom:mutation:node:removed', (event: CustomEvent) => { if (event.detail === target) { listener(); @@ -58,7 +57,7 @@ export default (signalize: Signalize): void => { callbackOrOptions?: CallableFunction | AddEventListenerOptions, options?: AddEventListenerOptions ): void { - const events = event.split(',').map((event) => event.trim()); + const events = event.split(' ').map((event) => event.trim()); let target: Selectable; let callback: CallableFunction; const root = config.root ?? document; diff --git a/packages/signalizejs/core/src/plugins/ref.ts b/packages/signalizejs/src/plugins/ref.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/ref.ts rename to packages/signalizejs/src/plugins/ref.ts diff --git a/packages/signalizejs/core/src/plugins/scope.ts b/packages/signalizejs/src/plugins/scope.ts similarity index 94% rename from packages/signalizejs/core/src/plugins/scope.ts rename to packages/signalizejs/src/plugins/scope.ts index c531dab..0d65653 100755 --- a/packages/signalizejs/core/src/plugins/scope.ts +++ b/packages/signalizejs/src/plugins/scope.ts @@ -38,6 +38,7 @@ export class Scope { this.element = element; this.#signalize = signalize; this.#scopeAttribute = scopeAttribute; + const getElementData = (element, data = {}): Scope => { if (element === null) { return data; @@ -68,8 +69,7 @@ export class Scope { } } - const callableData = new CallableData(); - this.data = callableData; + this.data = new CallableData(); this.element.__signalizeScope = this; if (init !== undefined) { @@ -77,7 +77,7 @@ export class Scope { } } - cleanup (callback: CallableFunction): void { + cleanup = (callback: CallableFunction): void => { if (callback === undefined) { for (const cleanup of this.#cleanups) { cleanup(); @@ -90,17 +90,18 @@ export class Scope { this.#cleanups.add(callback); } - ref(id: string): T | null { + ref = (id: string): T | null => { + console.log(this); const refEl = this.#signalize.ref(id, this.element); return refEl !== null && this.#parentScopeIsEl(refEl) ? refEl : null } - refs (id: string): HTMLElement[] { + refs = (id: string): HTMLElement[] => { return [...this.#signalize.refs(id, this.element)].filter(this.#parentScopeIsEl) } - #parentScopeIsEl (refElement: HTMLElement): boolean { - return refElement.closest(`[${this.#scopeAttribute}]`) === el; + #parentScopeIsEl = (refElement: HTMLElement): boolean => { + return refElement.closest(`[${this.#scopeAttribute}]`) === this.element; } } diff --git a/packages/signalizejs/core/src/plugins/select.ts b/packages/signalizejs/src/plugins/select.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/select.ts rename to packages/signalizejs/src/plugins/select.ts diff --git a/packages/signalizejs/core/src/plugins/signal.ts b/packages/signalizejs/src/plugins/signal.ts similarity index 90% rename from packages/signalizejs/core/src/plugins/signal.ts rename to packages/signalizejs/src/plugins/signal.ts index 92e45a3..e68f4e5 100755 --- a/packages/signalizejs/core/src/plugins/signal.ts +++ b/packages/signalizejs/src/plugins/signal.ts @@ -40,7 +40,7 @@ class Signal extends Function { }) } - get (): T { + get = (): T => { for (const watcher of this.watchers.onGet) { watcher({ newValue: this.value, oldValue: this.value }); } @@ -48,7 +48,7 @@ class Signal extends Function { return this.value; } - set (newValue: T): void { + set = (newValue: T): void => { const oldValue = this.value; if (['string', 'number'].includes(typeof newValue) && newValue === oldValue) { @@ -78,7 +78,7 @@ class Signal extends Function { } } - watch(listener: BeforeSetSignalWatcher | AfterSetSignalWatcher, options: SignalWatcherOptions = {}) { + watch = (listener: BeforeSetSignalWatcher | AfterSetSignalWatcher, options: SignalWatcherOptions = {}) => { const immediate = options.immediate ?? false; const execution = options.execution ?? 'afterSet'; @@ -96,15 +96,15 @@ class Signal extends Function { } } - toString (): string { + toString = (): string => { return String(this.get()) } - toJSON (): T { + toJSON = (): T => { return this.get(); } - valueOf (): T { + valueOf = (): T => { return this.get(); } } diff --git a/packages/signalizejs/core/src/plugins/task.ts b/packages/signalizejs/src/plugins/task.ts similarity index 100% rename from packages/signalizejs/core/src/plugins/task.ts rename to packages/signalizejs/src/plugins/task.ts diff --git a/rollup.config.js b/rollup.config.js index 5314142..d648dfb 100755 --- a/rollup.config.js +++ b/rollup.config.js @@ -11,24 +11,25 @@ const signalizeDir = `${packagesDir}/signalizejs`; * @type { RollupOptions[] } */ const packages = [ - // signalizejs/core + // signalizejs { plugins: [ typescript({ declaration: true, - rootDir: `${signalizeDir}/core/src`, - declarationDir: `${signalizeDir}/core/dist` - }) + rootDir: `${signalizeDir}/src`, + declarationDir: `${signalizeDir}/dist` + }), + nodeResolve() ], - input: `${signalizeDir}/core/src/index.ts`, + input: `${signalizeDir}/src/index.ts`, treeshake: false, output: [ { - file: `${signalizeDir}/core/dist/core.js`, + file: `${signalizeDir}/dist/signalize.js`, format: 'esm' }, { - file: `${signalizeDir}/core/dist/core.cjs`, + file: `${signalizeDir}/dist/signalize.cjs`, format: 'cjs' } ] @@ -37,15 +38,15 @@ const packages = [ plugins: [ typescript({ declaration: true, - rootDir: `${signalizeDir}/core/src`, - declarationDir: `${signalizeDir}/core/dist` + rootDir: `${signalizeDir}/src`, + declarationDir: `${signalizeDir}/dist` }) ], - input: `${signalizeDir}/core/src/index.global.ts`, + input: `${signalizeDir}/src/index.global.ts`, treeshake: false, output: [ { - file: `${signalizeDir}/core/dist/core.global.js`, + file: `${signalizeDir}/dist/signalize.global.js`, format: 'iife' } ] @@ -241,47 +242,6 @@ const packages = [ format: 'cjs' } ] - }, - - // signalizejs - { - plugins: [ - typescript({ - declaration: true, - rootDir: `${signalizeDir}/src`, - declarationDir: `${signalizeDir}/dist` - }), - nodeResolve() - ], - input: `${signalizeDir}/src/index.ts`, - treeshake: false, - output: [ - { - file: `${signalizeDir}/dist/signalize.js`, - format: 'esm' - }, - { - file: `${signalizeDir}/dist/signalize.cjs`, - format: 'cjs' - } - ] - }, - { - plugins: [ - typescript({ - declaration: true, - rootDir: `${signalizeDir}/src`, - declarationDir: `${signalizeDir}/dist` - }) - ], - input: `${signalizeDir}/src/index.global.ts`, - treeshake: false, - output: [ - { - file: `${signalizeDir}/dist/signalize.global.js`, - format: 'iife' - } - ] } ] diff --git a/second.html b/second.html new file mode 100755 index 0000000..ef63619 --- /dev/null +++ b/second.html @@ -0,0 +1,38 @@ + + + + + + + + + First page + + + + + + +
+ First +
+ + + + + + diff --git a/vite.config.js b/vite.config.js index ee4fd2d..abfefee 100755 --- a/vite.config.js +++ b/vite.config.js @@ -10,7 +10,6 @@ export default defineConfig({ alias: { 'signalizejs/ajax': `${packagesDir}/ajax/src/index.ts`, 'signalizejs/asset-loader': `${packagesDir}/asset-loader/src/index.ts`, - 'signalizejs/core': `${packagesDir}/core/src/index.ts`, 'signalizejs/dialog': `${packagesDir}/dialog/src/index.ts`, 'signalizejs/directives': `${packagesDir}/directives/src/index.ts`, 'signalizejs/h': `${packagesDir}/h/src/index.ts`,