@lisergia/core 22.0.0 → 23.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @lisergia/core
2
2
 
3
+ ## 23.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - Add IS_LINKS_ENABLED flag.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+ - @lisergia/config-tsconfig@23.0.0
13
+
3
14
  ## 22.0.0
4
15
 
5
16
  ### Major Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lisergia/core",
3
- "version": "22.0.0",
3
+ "version": "23.0.1",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "type": "module",
@@ -9,7 +9,7 @@
9
9
  "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
10
10
  },
11
11
  "dependencies": {
12
- "@lisergia/config-tsconfig": "22.0.0",
12
+ "@lisergia/config-tsconfig": "23.0.0",
13
13
  "auto-bind": "^5.0.1",
14
14
  "gsap": "^3.13.0",
15
15
  "lenis": "^1.3.1",
package/src/App.ts CHANGED
@@ -164,6 +164,8 @@ export class ApplicationManager extends Component {
164
164
  //
165
165
  // Initialization.
166
166
  //
167
+ IS_LINKS_ENABLED = true
168
+
167
169
  declare links: Links
168
170
 
169
171
  initPage() {
@@ -175,6 +177,10 @@ export class ApplicationManager extends Component {
175
177
  // Links.
176
178
  //
177
179
  createLinks() {
180
+ if (!this.IS_LINKS_ENABLED) {
181
+ return
182
+ }
183
+
178
184
  this.links = new Links(this)
179
185
  }
180
186
 
@@ -1,20 +0,0 @@
1
-
2
- 
3
- > @lisergia/core@21.0.0 build
4
- > tsup src/index.ts --format cjs,esm --dts
5
-
6
- CLI Building entry: src/index.ts
7
- CLI Using tsconfig: tsconfig.json
8
- CLI tsup v8.5.0
9
- CLI Target: node16
10
- CJS Build start
11
- ESM Build start
12
- CJS dist/index.cjs 16.54 KB
13
- CJS ⚡️ Build success in 37ms
14
- ESM dist/index.js 14.28 KB
15
- ESM ⚡️ Build success in 37ms
16
- DTS Build start
17
- DTS ⚡️ Build success in 830ms
18
- DTS dist/index.d.cts 5.98 KB
19
- DTS dist/index.d.ts 5.98 KB
20
- ⠙
package/dist/index.cjs DELETED
@@ -1,639 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.ts
31
- var index_exports = {};
32
- __export(index_exports, {
33
- Application: () => Application,
34
- ApplicationManager: () => ApplicationManager,
35
- Component: () => Component,
36
- EventEmitter: () => EventEmitter,
37
- Link: () => Link,
38
- Links: () => Links,
39
- Page: () => Page,
40
- Tempus: () => import_tempus2.default
41
- });
42
- module.exports = __toCommonJS(index_exports);
43
-
44
- // src/App.ts
45
- var import_mobx2 = require("mobx");
46
-
47
- // src/EventEmitter.ts
48
- var import_auto_bind = __toESM(require("auto-bind"), 1);
49
- var import_nanoevents = require("nanoevents");
50
- var EventEmitter = class {
51
- emitter;
52
- entries = /* @__PURE__ */ new Map();
53
- constructor() {
54
- (0, import_auto_bind.default)(this);
55
- this.emitter = (0, import_nanoevents.createNanoEvents)();
56
- }
57
- on(event, callback) {
58
- if (!callback) {
59
- return console.trace("No callback provided");
60
- }
61
- const emitter = this.emitter.on(event, callback);
62
- this.entries.set(callback, emitter);
63
- return emitter;
64
- }
65
- off(event, callback) {
66
- const unsubscribe = this.entries.get(callback);
67
- if (unsubscribe) {
68
- unsubscribe();
69
- }
70
- this.entries.delete(callback);
71
- }
72
- fire(event, ...args) {
73
- this.emitter.emit(event, ...args);
74
- }
75
- destroy() {
76
- this.entries.forEach((unsubscribe) => unsubscribe());
77
- this.entries.clear();
78
- }
79
- };
80
-
81
- // src/Component.ts
82
- var Component = class extends EventEmitter {
83
- application;
84
- autoListeners;
85
- autoMount;
86
- classes;
87
- selector;
88
- selectors;
89
- id;
90
- element;
91
- elements = {};
92
- constructor({
93
- application,
94
- autoListeners = true,
95
- autoMount = true,
96
- classes,
97
- element,
98
- elements,
99
- id
100
- }) {
101
- super();
102
- this.application = application;
103
- this.autoListeners = autoListeners;
104
- this.autoMount = autoMount;
105
- this.classes = classes;
106
- this.selector = element;
107
- this.selectors = elements;
108
- this.id = id;
109
- if (this.autoMount) {
110
- this.create();
111
- }
112
- if (this.autoListeners) {
113
- this.addEventListeners();
114
- }
115
- }
116
- create() {
117
- if (this.selector) {
118
- this.initElement(this.selector);
119
- }
120
- if (this.selectors) {
121
- this.initElements(this.selectors);
122
- }
123
- }
124
- initElement(selector) {
125
- if (selector instanceof HTMLElement) {
126
- this.element = selector;
127
- } else {
128
- this.element = document.querySelector(selector);
129
- }
130
- }
131
- destroyElement() {
132
- this.element = void 0;
133
- }
134
- initElements(selectors) {
135
- for (const key in selectors) {
136
- const selector = selectors[key];
137
- if (selector === window) {
138
- this.elements[key] = window;
139
- } else if (selector instanceof HTMLElement) {
140
- this.elements[key] = selector;
141
- } else if (selector instanceof NodeList) {
142
- this.elements[key] = selector;
143
- } else if (Array.isArray(selector)) {
144
- this.elements[key] = selector;
145
- } else {
146
- const elements = this.element.querySelectorAll(selector);
147
- if (elements.length === 0) {
148
- const elements2 = document.querySelectorAll(selector);
149
- if (elements2.length === 0) {
150
- this.elements[key] = null;
151
- } else if (elements2.length === 1) {
152
- this.elements[key] = elements2[0];
153
- } else {
154
- this.elements[key] = elements2;
155
- }
156
- } else if (elements.length === 1) {
157
- this.elements[key] = elements[0];
158
- } else {
159
- this.elements[key] = elements;
160
- }
161
- }
162
- }
163
- }
164
- destroyElements() {
165
- this.elements = {};
166
- }
167
- addEventListeners() {
168
- }
169
- removeEventListeners() {
170
- }
171
- destroy() {
172
- super.destroy();
173
- this.removeEventListeners();
174
- this.destroyElements();
175
- this.destroyElement();
176
- }
177
- };
178
-
179
- // src/Links.ts
180
- var import_mobx = require("mobx");
181
-
182
- // src/Link.ts
183
- var Link = class extends Component {
184
- constructor({ element }) {
185
- super({ element });
186
- }
187
- onClick(event) {
188
- event.preventDefault();
189
- this.fire("click", this.element.href);
190
- }
191
- addEventListeners() {
192
- const isLocal = this.element.href.includes(window.location.origin);
193
- const isLocalPrevented = this.element.dataset.linkOverride === "";
194
- const isNotEmail = !this.element.href.startsWith("mailto");
195
- const isNotPhone = !this.element.href.startsWith("tel");
196
- const isDownload = this.element.hasAttribute("download");
197
- const isAnchor = this.element.href.includes("#");
198
- if (isAnchor) {
199
- const hash = this.element.href.split("#")[1];
200
- if (hash) {
201
- const element = document.querySelector(`#${hash}`);
202
- if (element) {
203
- return;
204
- }
205
- }
206
- }
207
- if (isLocalPrevented || isDownload) {
208
- return;
209
- }
210
- if (isLocal) {
211
- this.element.onclick = this.onClick;
212
- } else if (isNotEmail && isNotPhone) {
213
- this.element.rel = "noopener";
214
- this.element.setAttribute("target", "_blank");
215
- }
216
- }
217
- removeEventListeners() {
218
- this.element.onclick = null;
219
- }
220
- };
221
-
222
- // src/Links.ts
223
- var Links = class extends EventEmitter {
224
- constructor(application) {
225
- super();
226
- this.application = application;
227
- (0, import_mobx.reaction)(
228
- () => application.currentPage,
229
- () => this.refresh(),
230
- { fireImmediately: true }
231
- );
232
- }
233
- addEventListeners() {
234
- var _a;
235
- (_a = this.links) == null ? void 0 : _a.forEach((link) => link.destroy());
236
- const links = document.querySelectorAll("a");
237
- this.links = Array.from(links).map((element) => {
238
- const link = new Link({
239
- element
240
- });
241
- link.on("click", this.onLinkClick);
242
- return link;
243
- });
244
- }
245
- onLinkClick(href) {
246
- this.application.route = href.replace(window.location.origin, "");
247
- }
248
- refresh() {
249
- this.addEventListeners();
250
- }
251
- };
252
-
253
- // src/App.ts
254
- var ApplicationManager = class extends Component {
255
- template = document.documentElement.dataset.template ?? "404";
256
- constructor() {
257
- super({
258
- autoListeners: false,
259
- element: ".app"
260
- });
261
- (0, import_mobx2.makeObservable)(this, {
262
- // Application DOM Element.
263
- element: import_mobx2.observable,
264
- // Components.
265
- canvas: import_mobx2.observable,
266
- components: import_mobx2.observable,
267
- transition: import_mobx2.observable,
268
- // Page Information.
269
- currentPage: import_mobx2.observable,
270
- nextPage: import_mobx2.observable,
271
- // Route Information.
272
- route: import_mobx2.observable,
273
- routeHistory: import_mobx2.observable,
274
- // Template Information.
275
- template: import_mobx2.observable,
276
- // Page Scroll.
277
- scroll: import_mobx2.computed
278
- });
279
- (0, import_mobx2.observe)(this.components, this.onComponentChange);
280
- (0, import_mobx2.observe)(this, "route", this.onRouteChange);
281
- (0, import_mobx2.autorun)(this.onTitleUpdate);
282
- (0, import_mobx2.autorun)(this.onTemplateUpdate);
283
- this.addEventListeners();
284
- }
285
- onTitleUpdate() {
286
- var _a;
287
- const title = (_a = this.nextPage) == null ? void 0 : _a.title;
288
- if (title) {
289
- document.title = title;
290
- }
291
- }
292
- onTemplateUpdate() {
293
- var _a;
294
- const template = (_a = this.nextPage) == null ? void 0 : _a.template;
295
- if (template) {
296
- document.documentElement.dataset.template = template;
297
- this.template = template;
298
- }
299
- }
300
- //
301
- // Components.
302
- //
303
- canvas;
304
- components = [];
305
- transition;
306
- initComponents(components) {
307
- const classes = components.map(
308
- ({ component: Component2 }) => new Component2({
309
- application: this
310
- })
311
- );
312
- this.canvas = classes.find((component) => component.id === "canvas");
313
- this.transition = classes.find((component) => component.id === "transition");
314
- classes.forEach((component) => {
315
- this.addComponent(component);
316
- });
317
- }
318
- addComponent(component) {
319
- this.components.push(component);
320
- }
321
- removeComponent(component) {
322
- component.destroy();
323
- const index = this.components.indexOf(component);
324
- if (index !== -1) {
325
- this.components.splice(index, 1);
326
- }
327
- }
328
- onComponentChange(event) {
329
- if (event.type === "splice") {
330
- const { added, removed } = event;
331
- }
332
- }
333
- //
334
- // Datasets.
335
- //
336
- datasets = [];
337
- initDatasets(datasets) {
338
- this.datasets = datasets;
339
- }
340
- //
341
- // Routes.
342
- //
343
- pages = /* @__PURE__ */ new Map();
344
- initRoutes(routes) {
345
- routes.forEach(({ component, template }) => {
346
- this.pages.set(template, component);
347
- });
348
- }
349
- //
350
- // Sprites.
351
- //
352
- async initSprites(url = "/bundle.svg") {
353
- const request = await window.fetch(url);
354
- const response = await request.text();
355
- const sprite = document.createElement("div");
356
- sprite.innerHTML = response;
357
- sprite.style.left = "-999999px";
358
- sprite.style.opacity = "0";
359
- sprite.style.position = "absolute";
360
- sprite.style.top = "0";
361
- document.body.appendChild(sprite);
362
- }
363
- initPage() {
364
- this.createPage();
365
- this.createLinks();
366
- }
367
- //
368
- // Links.
369
- //
370
- createLinks() {
371
- this.links = new Links(this);
372
- }
373
- //
374
- // Page.
375
- //
376
- currentPage = void 0;
377
- createPage(template = this.template) {
378
- const PageClass = this.pages.get(template);
379
- const page = new PageClass({
380
- application: this,
381
- datasets: this.datasets
382
- });
383
- this.currentPage = page;
384
- this.currentPage.create();
385
- }
386
- destroyPage() {
387
- if (this.currentPage) {
388
- this.currentPage.destroy();
389
- }
390
- }
391
- //
392
- // Navigate.
393
- //
394
- route = window.location.pathname;
395
- routeHistory = [this.route];
396
- routePushState = true;
397
- onRouteChange({ oldValue, newValue }) {
398
- const href = newValue.replace(window.location.origin, "");
399
- this.onRouteChangeRequest({
400
- href,
401
- pushState: this.routePushState
402
- });
403
- }
404
- async onRouteChangeRequest({ href, pushState = true }) {
405
- const request = await window.fetch(href);
406
- const response = await request.text();
407
- this.onRequest({
408
- href,
409
- response,
410
- pushState
411
- });
412
- }
413
- //
414
- // Request.
415
- //
416
- nextPage = {};
417
- async onRequest({ href, response, pushState }) {
418
- var _a, _b;
419
- let domParser = new DOMParser();
420
- let dom = domParser.parseFromString(response, "text/html");
421
- const html = dom.querySelector("html");
422
- const app = dom.querySelector(".app");
423
- this.nextPage = {
424
- element: app,
425
- template: html.dataset.template ?? this.template,
426
- title: dom.title ?? document.title
427
- };
428
- if (this.transition) {
429
- await ((_b = (_a = this.transition).onTransition) == null ? void 0 : _b.call(_a, this));
430
- } else {
431
- this.currentPage.element.remove();
432
- this.currentPage.destroy();
433
- this.element.appendChild(this.nextPage.element.firstElementChild);
434
- this.createPage(this.nextPage.template);
435
- }
436
- if (pushState) {
437
- window.history.pushState({}, this.nextPage.title, href);
438
- }
439
- this.routeHistory.push(href);
440
- domParser = null;
441
- dom = null;
442
- }
443
- //
444
- // Pop State.
445
- //
446
- onPopState(event) {
447
- if (event.state === null) {
448
- return event.preventDefault();
449
- }
450
- this.routePushState = false;
451
- this.route = document.location.pathname;
452
- this.routePushState = true;
453
- }
454
- //
455
- // Scroll.
456
- //
457
- get scroll() {
458
- return this.currentPage.scroll ?? 0;
459
- }
460
- //
461
- // Listeners.
462
- //
463
- addEventListeners() {
464
- window.addEventListener("popstate", this.onPopState);
465
- }
466
- removeEventListeners() {
467
- window.removeEventListener("popstate", this.onPopState);
468
- }
469
- };
470
- var Application = new ApplicationManager();
471
-
472
- // src/Page.ts
473
- var import_lenis = __toESM(require("lenis"), 1);
474
- var import_mobx3 = require("mobx");
475
- var import_gsap = __toESM(require("gsap"), 1);
476
- var import_ScrollTrigger = __toESM(require("gsap/src/ScrollTrigger"), 1);
477
- var import_tempus = __toESM(require("tempus"), 1);
478
- var Page = class extends Component {
479
- datasets = [];
480
- scroll = 0;
481
- scrollEnabled = true;
482
- scrollOptions = {};
483
- constructor({
484
- application,
485
- classes,
486
- datasets,
487
- element,
488
- elements,
489
- scrollEnabled = true,
490
- scrollOptions = {}
491
- }) {
492
- super({
493
- autoMount: false,
494
- autoListeners: false,
495
- classes,
496
- element,
497
- elements
498
- });
499
- this.application = application;
500
- this.datasets = datasets;
501
- this.scrollEnabled = scrollEnabled;
502
- this.scrollOptions = scrollOptions;
503
- (0, import_mobx3.makeObservable)(this, {
504
- element: import_mobx3.observable,
505
- elements: import_mobx3.observable,
506
- components: import_mobx3.observable,
507
- scroll: import_mobx3.observable
508
- });
509
- }
510
- create() {
511
- super.create();
512
- this.createResizeObserver();
513
- this.createComponents();
514
- this.createScroll();
515
- this.addEventListeners();
516
- }
517
- createResizeObserver() {
518
- this.resizeObserver = new ResizeObserver(() => {
519
- this.onResize();
520
- });
521
- this.resizeObserver.observe(this.elements.wrapper);
522
- }
523
- destroyResizeObserver() {
524
- this.resizeObserver.disconnect();
525
- }
526
- //
527
- // Components.
528
- //
529
- components = /* @__PURE__ */ new Set();
530
- createComponents() {
531
- this.datasets.map(({ component: Component2, selector }) => {
532
- const elements = this.element.querySelectorAll(selector);
533
- const components = Array.from(elements).map((element) => {
534
- const component = new Component2({
535
- application: this.application,
536
- element
537
- });
538
- return component;
539
- });
540
- components.forEach((component) => {
541
- this.application.addComponent(component);
542
- this.components.add(component);
543
- });
544
- });
545
- }
546
- destroyComponents() {
547
- this.components.forEach((component) => {
548
- this.application.removeComponent(component);
549
- });
550
- this.components.clear();
551
- }
552
- createScroll() {
553
- if (!this.scrollEnabled) {
554
- this.element.addEventListener("scroll", this.onScrollFallback);
555
- return;
556
- }
557
- this.lenis = new import_lenis.default({
558
- content: this.elements.wrapper,
559
- wrapper: this.element,
560
- ...this.scrollOptions
561
- });
562
- import_gsap.default.ticker.add(this.onGSAPTicker);
563
- import_gsap.default.ticker.lagSmoothing(0);
564
- this.lenis.on("scroll", this.onLenisScroll);
565
- }
566
- onGSAPTicker(time) {
567
- this.lenis.raf(time * 1e3);
568
- }
569
- onLenisScroll(event) {
570
- import_ScrollTrigger.default.update();
571
- this.onScroll(event.scroll);
572
- this.emitter.emit("scroll", event);
573
- }
574
- destroyScroll() {
575
- var _a;
576
- if (!this.scrollEnabled) {
577
- this.element.removeEventListener("scroll", this.onScrollFallback);
578
- return;
579
- }
580
- import_gsap.default.ticker.remove(this.onGSAPTicker);
581
- this.lenis.off("scroll", this.onLenisScroll);
582
- (_a = this.lenis) == null ? void 0 : _a.destroy();
583
- this.lenis = void 0;
584
- }
585
- //
586
- // Events.
587
- //
588
- onResize() {
589
- var _a;
590
- (_a = this.lenis) == null ? void 0 : _a.resize();
591
- }
592
- onRAF(time) {
593
- var _a;
594
- (_a = this.lenis) == null ? void 0 : _a.raf(time);
595
- }
596
- onScroll(scroll) {
597
- this.scroll = scroll;
598
- }
599
- onScrollFallback() {
600
- this.scroll = this.element.scrollTop;
601
- this.emitter.emit("scroll", { scroll: this.scroll });
602
- }
603
- //
604
- // Events.
605
- //
606
- addEventListeners() {
607
- super.addEventListeners();
608
- this.unsubscribeRaf = import_tempus.default.add(this.onRAF);
609
- }
610
- removeEventListeners() {
611
- var _a;
612
- super.removeEventListeners();
613
- (_a = this.unsubscribeRaf) == null ? void 0 : _a.call(this);
614
- this.unsubscribeRaf = void 0;
615
- }
616
- //
617
- // Destroy.
618
- //
619
- destroy() {
620
- this.destroyResizeObserver();
621
- this.destroyComponents();
622
- this.destroyScroll();
623
- super.destroy();
624
- }
625
- };
626
-
627
- // src/index.ts
628
- var import_tempus2 = __toESM(require("tempus"), 1);
629
- // Annotate the CommonJS export names for ESM import in node:
630
- 0 && (module.exports = {
631
- Application,
632
- ApplicationManager,
633
- Component,
634
- EventEmitter,
635
- Link,
636
- Links,
637
- Page,
638
- Tempus
639
- });