@@ -46,13 +47,13 @@ class ContextWorker extends Nullstack {
-
+
-
id)?.join(',')}>
+
id)?.join(',')}>
{worker.registration &&
diff --git a/tests/src/ContextWorker.test.js b/tests/src/ContextWorker.test.js
index 9043041b..bd21572f 100644
--- a/tests/src/ContextWorker.test.js
+++ b/tests/src/ContextWorker.test.js
@@ -15,7 +15,7 @@ describe('ContextWorker', () => {
});
test('has a cdn key', async () => {
- const element = await page.$('[data-cdn="http://127.0.0.1:6969"]');
+ const element = await page.$('[data-cdn="http://localhost:6969"]');
expect(element).toBeTruthy();
});
@@ -74,7 +74,7 @@ describe('ContextWorker', () => {
describe('ContextWorker', () => {
beforeAll(async () => {
- await page.goto('http://localhost:6969/context-worker');
+ await page.goto('http://localhost:6969/context-worker', { waitUntil: "networkidle0" });
});
test('fetching is set to true when the worker is fetching', async () => {
@@ -90,7 +90,7 @@ describe('ContextWorker', () => {
describe('ContextWorker', () => {
beforeAll(async () => {
- await page.goto('http://localhost:6969/context-worker');
+ await page.goto('http://localhost:6969/context-worker', { waitUntil: "networkidle0" });
});
test('fetching is set to the arguments of the server function when the worker is fetching', async () => {
diff --git a/tests/src/DateParser.njs b/tests/src/DateParser.njs
index fb118093..70e6c737 100644
--- a/tests/src/DateParser.njs
+++ b/tests/src/DateParser.njs
@@ -3,20 +3,20 @@ import Nullstack from 'nullstack';
class DateParser extends Nullstack {
object = null;
-
+
prepare(context) {
- const date = new Date('1992-10-16');
- context.object = {date}
- this.object = {date};
+ const date = new Date('1992-10-16');
+ context.object = { date }
+ this.object = { date };
}
-
- render({self, object}) {
+
+ render({ object }) {
return (
-
+
- {self.hydrated &&
}
- {self.hydrated &&
}
+ {this.hydrated &&
}
+ {this.hydrated &&
}
)
}
diff --git a/tests/src/DynamicHead.njs b/tests/src/DynamicHead.njs
new file mode 100644
index 00000000..9705f975
--- /dev/null
+++ b/tests/src/DynamicHead.njs
@@ -0,0 +1,73 @@
+import Nullstack from 'nullstack';
+
+class DynamicHead extends Nullstack {
+
+ count = 0
+ negativeCount = 0
+
+ renderHead() {
+ const innerComponent = `[data-inner-component] { color: blue }`
+ return (
+
+ )
+ }
+
+ render() {
+ const color = this.count % 2 === 0 ? 'red' : 'blue'
+ const redBlue = `[data-red-blue] { color: ${color}}`
+ const prerenderConditional = `[data-prerender-conditional] { color: blue }`
+ const rerenderConditional = `[data-rerender-conditional] { color: blue }`
+ const fragment = `[data-fragment] { color: blue }`
+ const conditionalHead = `[data-conditional-head] { color: blue }`
+ const dynamicLength = `[data-dynamic-length] { color: blue }`
+ return (
+
+
+
+ {this.count === 0 && }
+ {this.count === 1 && }
+ <>
+
+
+
+
+ {this.count === 1 &&
+
+
+
+ }
+
+ {this.count % 2 === 0 ? :
}
+
+
+ {Array(this.count + 1 - this.negativeCount).fill()}
+
+
+
+
data-red-blue
+
data-prerender-conditional
+
data-rerender-conditional
+
data-fragment
+
data-conditional-head
+
data-inner-component
+ {this.count % 2 === 0 ?
+
+
+ :
not head
+ }
+ {this.count % 2 === 0
+ ?
+
+
+ :
+
+
+
+ }
+
+ )
+ }
+
+}
+
+export default DynamicHead;
\ No newline at end of file
diff --git a/tests/src/DynamicHead.test.js b/tests/src/DynamicHead.test.js
new file mode 100644
index 00000000..cfca3008
--- /dev/null
+++ b/tests/src/DynamicHead.test.js
@@ -0,0 +1,135 @@
+beforeEach(async () => {
+ await page.goto('http://localhost:6969/dynamic-head');
+});
+
+describe('DynamicHead', () => {
+
+ test('styles can be added inline to the head tag during ssr', async () => {
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-red-blue]")).color')
+ expect(color).toEqual('rgb(255, 0, 0)');
+ });
+
+ test('head styles can be updated dynamicly', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-red-blue][data-count="1"]');
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-red-blue]")).color')
+ expect(color).toEqual('rgb(0, 0, 255)');
+ });
+
+ test('styles can be added from inner components to the head tag', async () => {
+ await page.waitForSelector('[data-inner-component]');
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-inner-component]")).color')
+ expect(color).toEqual('rgb(0, 0, 255)');
+ });
+
+ test('styles can be added from fragments to the head tag', async () => {
+ await page.waitForSelector('[data-fragment]');
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-fragment]")).color')
+ expect(color).toEqual('rgb(0, 0, 255)');
+ });
+
+ test('styles can be conditionaly prerendered inside the head tag', async () => {
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-prerender-conditional]")).color')
+ expect(color).toEqual('rgb(0, 0, 255)');
+ });
+
+ test('styles can be conditionaly rerendered inside the head tag', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('head [data-rerender-conditional]');
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-rerender-conditional]")).color')
+ expect(color).toEqual('rgb(0, 0, 255)');
+ });
+
+ test('styles can be rendered inside a conditionaly rendered head tag', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('head [data-conditional-head]');
+ const color = await page.evaluate('getComputedStyle(document.body.querySelector("[data-conditional-head]")).color')
+ expect(color).toEqual('rgb(0, 0, 255)');
+ });
+
+ test('heads can be replaced by ternaries', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-ternary-span]');
+ const element = await page.$('[data-ternary-span]');
+ expect(element).toBeTruthy();
+ });
+
+ test('heads can be inserted by ternaries', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-ternary-span]');
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-ternary-head]');
+ const element = await page.$('[data-ternary-head]');
+ expect(element).toBeTruthy();
+ });
+
+ test('head elements can have custom ids', async () => {
+ const element = await page.$('#ternary-head');
+ expect(element).toBeTruthy();
+ });
+
+ test('the head tag accepts dynamic lists of increasing size', async () => {
+ for (let i = 1; i < 3; i++) {
+ await page.click('[data-increment]');
+ await page.waitForSelector(`[data-dynamic-length="${i}"]`);
+ }
+ const elements = await page.$$('[data-dynamic-length]');
+ expect(elements.length).toEqual(3);
+ });
+
+ test('the head tag accepts dynamic lists of decreasing size', async () => {
+ for (let i = 1; i < 3; i++) {
+ await page.click('[data-increment]');
+ await page.waitForSelector(`[data-dynamic-length="${i}"]`);
+ }
+ await page.click('[data-decrement]');
+ await page.waitForSelector('[data-negative-count]');
+ const elements = await page.$$('[data-negative-count]');
+ expect(elements.length).toEqual(2);
+ });
+
+ test('dynamic head elements can update attributes', async () => {
+ for (let i = 1; i < 3; i++) {
+ await page.click('[data-increment]');
+ await page.waitForSelector(`[data-dynamic-length="${i}"]`);
+ }
+ await page.click('[data-decrement]');
+ await page.waitForSelector('[data-negative-count]');
+ await page.click('[data-decrement]');
+ await page.waitForSelector('[data-dynamic-length]:not([data-negative-count])');
+ const element = await page.$('[data-dynamic-length]:not([data-negative-count])');
+ expect(element).toBeTruthy();
+ });
+
+ test('heads can be replaced in ternaries by heads with a highter children length', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-b2]');
+ await page.waitForSelector('[data-b1]');
+ const a1 = await page.$('[data-a1]');
+ const b1 = await page.$('[data-b1]');
+ const b2 = await page.$('[data-b2]');
+ expect(!a1 && b1 && b2).toBeTruthy();
+ });
+
+ test('heads can be replaced in ternaries by heads with a highter children length', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-b2]');
+ await page.waitForSelector('[data-b1]');
+ await page.click('[data-increment]');
+ await page.waitForSelector('[data-a1]');
+ const a1 = await page.$('[data-a1]');
+ const b1 = await page.$('[data-b1]');
+ const b2 = await page.$('[data-b2]');
+ expect(a1 && !b1 && !b2).toBeTruthy();
+ });
+
+ test('head children can be ternaries', async () => {
+ await page.click('[data-increment]');
+ await page.waitForSelector('meta[data-ternary-head-children]');
+ await page.click('[data-increment]');
+ await page.waitForSelector('style[data-ternary-head-children]');
+ const element = await page.$('style[data-ternary-head-children]');
+ expect(element).toBeTruthy();
+ });
+
+});
\ No newline at end of file
diff --git a/tests/src/Element.njs b/tests/src/Element.njs
index 923e9c97..e9755005 100644
--- a/tests/src/Element.njs
+++ b/tests/src/Element.njs
@@ -1,14 +1,39 @@
import Nullstack from 'nullstack';
+class ClassElement extends Nullstack {
+
+ render({ prop }) {
+ return (
+
+ )
+ }
+
+}
+
+function FunctionalElement({ prop }) {
+ return (
+
+ )
+}
+
class Element extends Nullstack {
-
+
+ renderInnerElement({ prop }) {
+ return (
+
+ )
+ }
+
render() {
return (
- <>
+ <>
b
abbr
+
+
+
)
}
diff --git a/tests/src/Element.test.js b/tests/src/Element.test.js
index 6947b7f0..d5606a4a 100644
--- a/tests/src/Element.test.js
+++ b/tests/src/Element.test.js
@@ -19,4 +19,20 @@ describe('FullStackLifecycle', () => {
expect(element).toBeFalsy();
});
+ test('elements can be inner components and receive props', async () => {
+ const element = await page.$('[data-inner-component]');
+ expect(element).toBeTruthy();
+ });
+
+ test('elements can be class components and receive props', async () => {
+ const element = await page.$('[data-class-component]');
+ expect(element).toBeTruthy();
+ });
+
+ test('elements can be functional components and receive props', async () => {
+ const element = await page.$('[data-functional-component]');
+ expect(element).toBeTruthy();
+ });
+
+
});
\ No newline at end of file
diff --git a/tests/src/ErrorOnChildNode.njs b/tests/src/ErrorOnChildNode.njs
index 7ff32ce5..86b9a77c 100644
--- a/tests/src/ErrorOnChildNode.njs
+++ b/tests/src/ErrorOnChildNode.njs
@@ -14,14 +14,14 @@ class ObjectId {
class ErrorOnChildNode extends Nullstack {
- testValue = 'initial Value';
+ value = 'initial Value';
records = [
{ _id: new ObjectId('a') },
]
testClick() {
- this.testValue = 'Changed Value';
+ this.value = 'Changed Value';
}
renderSerializationError() {
@@ -61,13 +61,13 @@ class ErrorOnChildNode extends Nullstack {
render({ params }) {
return (
<>
-
Table Error
+
Table Error
{params.serialization &&
}
{params.dom &&
}
-
- {this.testValue}
+
+ {this.value}
-
+
);
}
diff --git a/tests/src/ErrorOnChildNode.test.js b/tests/src/ErrorOnChildNode.test.js
index 9e34a577..5171e575 100644
--- a/tests/src/ErrorOnChildNode.test.js
+++ b/tests/src/ErrorOnChildNode.test.js
@@ -1,33 +1,42 @@
-describe('ErrorOnChildNode dom', () => {
-
- let error;
-
- beforeAll(async () => {
- jest.spyOn(console, 'error').mockImplementation((message) => error = message);
- await page.goto('http://localhost:6969/error-on-child-node?dom=true');
- });
+describe('ErrorOnChildNode dom ssr', () => {
test('should log that the dom is invalid', async () => {
- page.on("console", async () => {
- expect(error).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
+ const page = await browser.newPage();
+ await page.goto('http://localhost:6969/error-on-child-node?dom=true', { waitUntil: "networkidle0" });
+ page.on("console", async (message) => {
+ expect(message.text()).toMatch('THEAD expected tag TH to be child at index 2 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
})
});
-})
-describe('ErrorOnChildNode serialization', () => {
-
- let error;
+ test('Should log that the serialization missmatches the server dom', async () => {
+ const page = await browser.newPage();
+ await page.goto('http://localhost:6969/error-on-child-node?serialization=true', { waitUntil: "networkidle0" });
+ page.on("console", async (message) => {
+ expect(message.text()).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
+ })
+ });
- beforeAll(async () => {
- jest.spyOn(console, 'error').mockImplementation((message) => error = message);
- await page.goto('http://localhost:6969/error-on-child-node?serialization=true');
+ test('hydration errors related to dom should not happen in spa mode', async () => {
+ const page = await browser.newPage();
+ await page.goto('http://localhost:6969/', { waitUntil: "networkidle0" });
+ await page.click('[href="/error-on-child-node?dom=true"]');
+ await page.waitForSelector('[data-dom-error]');
+ await page.click('[data-dom-error]');
+ await page.waitForSelector('[data-value="Changed Value"]');
+ const element = await page.$('[data-value="Changed Value"]');
+ expect(element).toBeTruthy();
});
- test('Should log that the serialization missmatches the server dom', async () => {
- page.on("console", async () => {
- expect(error).toMatch('DIV expected tag DIV to be child at index 0 but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.');
- })
+ test('hydration errors related to dom should not happen in spa mode', async () => {
+ const page = await browser.newPage();
+ await page.goto('http://localhost:6969/', { waitUntil: "networkidle0" });
+ await page.click('[href="/error-on-child-node?serialization=true"]');
+ await page.waitForSelector('[data-dom-error]');
+ await page.click('[data-dom-error]');
+ await page.waitForSelector('[data-value="Changed Value"]');
+ const element = await page.$('[data-value="Changed Value"]');
+ expect(element).toBeTruthy();
});
})
\ No newline at end of file
diff --git a/tests/src/ErrorPage.njs b/tests/src/ErrorPage.njs
index bc05bbc7..ae4cf6ec 100644
--- a/tests/src/ErrorPage.njs
+++ b/tests/src/ErrorPage.njs
@@ -2,8 +2,8 @@ import Nullstack from 'nullstack';
class ErrorPage extends Nullstack {
- async initiate({page, params}) {
- if(params.status == 500) {
+ async initiate({ page, params }) {
+ if (params.status === '500') {
this.error.simulate;
} else {
page.status = 404;
diff --git a/tests/src/ErrorPage.test.js b/tests/src/ErrorPage.test.js
index 81063b74..5c0d55fb 100644
--- a/tests/src/ErrorPage.test.js
+++ b/tests/src/ErrorPage.test.js
@@ -3,8 +3,8 @@ describe('ErrorPage 500', () => {
let response;
beforeAll(async () => {
- response = await page.goto('http://localhost:6969/error-page?status=500');
- });
+ response = await page.goto('http://localhost:6969/error-page?status=500', { waitUntil: "networkidle0" });
+ });
test('pages with error have a 500 status', async () => {
const status = response.status();
@@ -22,7 +22,7 @@ describe('ErrorPage 500', () => {
describe('ErrorPage 404', () => {
test('pages with status 404 have a 404 status', async () => {
- const response = await page.goto('http://localhost:6969/error-page');
+ const response = await page.goto('http://localhost:6969/error-page', { waitUntil: "networkidle0" });
const status = response.status();
expect(status).toBe(404);
});
@@ -38,9 +38,9 @@ describe('ErrorPage 404', () => {
describe('ErrorPage offline', () => {
test('the offline template should always have a 200 status', async () => {
- await page.goto('http://localhost:6969');
+ await page.goto('http://localhost:6969', { waitUntil: "networkidle0" });
const link = await page.$eval('a', (element) => element.href);
- const response = await page.goto(link);
+ const response = await page.goto(link, { waitUntil: "networkidle0" });
const status = response.status();
expect([200, 304]).toContain(status);
});
diff --git a/tests/src/FalsyNodes.njs b/tests/src/FalsyNodes.njs
index 1732bca5..38a44212 100644
--- a/tests/src/FalsyNodes.njs
+++ b/tests/src/FalsyNodes.njs
@@ -6,11 +6,21 @@ class FalsyNodes extends Nullstack {
zeroNode = 0;
falseNode = false;
+ renderNullComponent() {
+ return null
+ }
+
+ renderFalseComponent() {
+ return false
+ }
+
render() {
return (
<>
{this.nullNode}
{this.falseNode}
+
+
{this.zeroNode}
)
diff --git a/tests/src/FalsyNodes.test.js b/tests/src/FalsyNodes.test.js
index 6a337339..56ee7b4f 100644
--- a/tests/src/FalsyNodes.test.js
+++ b/tests/src/FalsyNodes.test.js
@@ -14,8 +14,18 @@ describe('Falsy Nodes', () => {
expect(truth).toBeTruthy();
});
+ test('Components returning null should render a comment', async () => {
+ const truth = await page.$eval('[data-null-component]', (e) => e.childNodes[0] instanceof Comment);
+ expect(truth).toBeTruthy();
+ });
+
+ test('Components returning false should render a comment', async () => {
+ const truth = await page.$eval('[data-false-component]', (e) => e.childNodes[0] instanceof Comment);
+ expect(truth).toBeTruthy();
+ });
+
test('Zero nodes should render a text node', async () => {
- const truth = await page.$eval('[data-zero]', (e) => e.innerText === '0');
+ const truth = await page.$eval('[data-zero]', (e) => e.textContent === '0');
expect(truth).toBeTruthy();
});
diff --git a/tests/src/FullStackLifecycle.test.js b/tests/src/FullStackLifecycle.test.js
index f17af82b..a9c436de 100644
--- a/tests/src/FullStackLifecycle.test.js
+++ b/tests/src/FullStackLifecycle.test.js
@@ -54,7 +54,7 @@ describe('FullStackLifecycle ssr', () => {
test('terminate should run', async () => {
await page.click('a[href="/"]');
- await page.waitForFunction(() => location.search == '?terminated=true');
+ await page.waitForFunction(() => location.search === '?terminated=true');
const element = await page.$('.FullStackLifecycle');
expect(element).toBeFalsy();
});
@@ -118,7 +118,7 @@ describe('FullStackLifecycle spa', () => {
test('terminate should run', async () => {
await page.click('a[href="/"]');
- await page.waitForFunction(() => location.search == '?terminated=true');
+ await page.waitForFunction(() => location.search === '?terminated=true');
const element = await page.$('.FullStackLifecycle');
expect(element).toBeFalsy();
});
diff --git a/tests/src/HydrateElement.njs b/tests/src/HydrateElement.njs
deleted file mode 100644
index 74ca661f..00000000
--- a/tests/src/HydrateElement.njs
+++ /dev/null
@@ -1,17 +0,0 @@
-import Nullstack from 'nullstack';
-
-class HydrateElement extends Nullstack {
-
- hydrate({ self }) {
- this.id = self.element.id
- }
-
- render() {
- return (
-
HydrateElement
- )
- }
-
-}
-
-export default HydrateElement;
\ No newline at end of file
diff --git a/tests/src/HydrateElement.test.js b/tests/src/HydrateElement.test.js
deleted file mode 100644
index cd930528..00000000
--- a/tests/src/HydrateElement.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe('FullStackLifecycle ssr', () => {
-
- beforeAll(async () => {
- await page.goto('http://localhost:6969/');
- await page.click('[href="/hydrate-element"]')
- });
-
- test('prepare should run', async () => {
- await page.waitForSelector('[data-id="hydrate-element"]');
- const element = await page.$('[data-id="hydrate-element"]');
- expect(element).toBeTruthy();
- });
-
-
-});
\ No newline at end of file
diff --git a/tests/src/InstanceSelf.njs b/tests/src/InstanceSelf.njs
index 26e129d1..180e9ef4 100644
--- a/tests/src/InstanceSelf.njs
+++ b/tests/src/InstanceSelf.njs
@@ -3,26 +3,14 @@ import StatefulComponent from './StatefulComponent';
class InstanceSelf extends Nullstack {
- optimize = false;
-
- hydrate({self}) {
- this.className = self.element.className;
- }
-
- render({self}) {
+ render() {
return (
-
-
-
-
- {self.hydrated &&
- <>
-
-
-
-
- }
+
+
+
+
+ {this.hydrated &&
}
)
}
diff --git a/tests/src/InstanceSelf.test.js b/tests/src/InstanceSelf.test.js
index ef3ce280..067e64b5 100644
--- a/tests/src/InstanceSelf.test.js
+++ b/tests/src/InstanceSelf.test.js
@@ -4,37 +4,31 @@ beforeAll(async () => {
describe('InstanceSelf', () => {
- test('self is aware that the component initiated', async () => {
+ test('instance is aware that the component initiated', async () => {
await page.waitForSelector('[data-initiated]');
const element = await page.$('[data-initiated]');
expect(element).toBeTruthy();
});
- test('self is aware that the component is hydrated', async () => {
+ test('instance is aware that the component is hydrated', async () => {
await page.waitForSelector('[data-hydrated]');
const element = await page.$('[data-hydrated]');
expect(element).toBeTruthy();
});
- test('self is aware that the component was prerendered', async () => {
+ test('instance is aware that the component was prerendered', async () => {
await page.waitForSelector('[data-prerendered]');
const element = await page.$('[data-prerendered]');
expect(element).toBeTruthy();
});
- test('self is aware of the component element', async () => {
- await page.waitForSelector('[data-class-name="InstanceSelf"]');
- const element = await page.$('[data-class-name="InstanceSelf"]');
- expect(element).toBeTruthy();
- });
-
- test('self key has route appended to depth if no key is declared', async () => {
+ test('instance key has route appended to depth if no key is declared', async () => {
await page.waitForSelector('[data-key="InstanceSelf/0-0-6/instance-self"]');
const element = await page.$('[data-key="InstanceSelf/0-0-6/instance-self"]');
expect(element).toBeTruthy();
});
- test('self is aware of the component element after render', async () => {
+ test('instance is aware of the component element after render', async () => {
await page.waitForSelector('[data-tag="form"]');
const element = await page.$('[data-tag="form"]');
expect(element).toBeTruthy();
diff --git a/tests/src/Instanceable.njs b/tests/src/Instanceable.njs
index 93cbc5e6..7b882d3c 100644
--- a/tests/src/Instanceable.njs
+++ b/tests/src/Instanceable.njs
@@ -39,22 +39,21 @@ class Instanceable extends Nullstack {
instanceable.serverLoaded = true;
}
- renderTitle({ title, self }) {
+ renderTitle({ title }) {
return (
title[0] !== '_isProxy' &&
-
+
{this.title[title[0]]}
)
}
- render({ instances, self }) {
+ render({ instances }) {
const { application } = instances;
const mainHasKey = (
application &&
typeof application.changeInstanceable === 'function'
);
-
return (
{application &&
@@ -71,7 +70,7 @@ class Instanceable extends Nullstack {
}
-
+
)
}
diff --git a/tests/src/Instanceable.test.js b/tests/src/Instanceable.test.js
index 25bd5fc0..3270d0ff 100644
--- a/tests/src/Instanceable.test.js
+++ b/tests/src/Instanceable.test.js
@@ -8,7 +8,7 @@ describe('Instanceable', () => {
const selector = `[data-title="${title}"][data-hydrated]`;
await page.waitForSelector(selector);
const p = await page.$(selector);
- const text = await page.evaluate(element => element.innerText, p);
+ const text = await page.evaluate(element => element.textContent, p);
const expectedValue = new Array(2).fill(value).join(' ');
expect(text).toBe(expectedValue);
@@ -33,7 +33,7 @@ describe('Instanceable', () => {
expect(p).toBeTruthy();
});
- test('self key ignores the route suffix if a key is declared', async () => {
+ test('instance key ignores the route suffix if a key is declared', async () => {
await page.waitForSelector('[data-key="instanceable"]');
const element = await page.$('[data-key="instanceable"]');
expect(element).toBeTruthy();
diff --git a/tests/src/LazyComponentLoader.njs b/tests/src/LazyComponentLoader.njs
index a1664ba6..f60ed269 100644
--- a/tests/src/LazyComponentLoader.njs
+++ b/tests/src/LazyComponentLoader.njs
@@ -13,8 +13,8 @@ class LazyComponentLoader extends Nullstack {
LazyComponent = (await import('./LazyComponent')).default
}
- render({ self }) {
- if (!self.hydrated) return false
+ render() {
+ if (!this.hydrated) return false
return
}
diff --git a/tests/src/NestedProxy.njs b/tests/src/NestedProxy.njs
index d99859b2..7af544e3 100644
--- a/tests/src/NestedProxy.njs
+++ b/tests/src/NestedProxy.njs
@@ -1,9 +1,19 @@
import Nullstack from 'nullstack';
+class ShouldNotProxy {
+
+ something = false
+
+ setSomething(value) {
+ this.something = value
+ }
+
+}
+
class NestedProxy extends Nullstack {
array = [
- {object: {object: true}}
+ { object: { object: true } }
]
object = {
@@ -12,28 +22,37 @@ class NestedProxy extends Nullstack {
prepare(context) {
context.array = [
- {object: {object: true}}
+ { object: { object: true } }
]
context.object = {
array: [true]
}
}
-
- render(context) {
- if(!context.self.hydrated) return false
+
+ hydrate(context) {
+ this.shouldNotProxy = new ShouldNotProxy()
+ this.shouldNotProxy.setSomething(true)
+ context.shouldNotProxy = new ShouldNotProxy()
+ context.shouldNotProxy.setSomething(true)
+ }
+
+ render({ array, object, shouldNotProxy }) {
+ if (!this.hydrated) return false
return (
-
)
}
diff --git a/tests/src/NestedProxy.test.js b/tests/src/NestedProxy.test.js
index c47ddaaa..1f7fc69f 100644
--- a/tests/src/NestedProxy.test.js
+++ b/tests/src/NestedProxy.test.js
@@ -34,34 +34,46 @@ describe('ParentComponent', () => {
expect(element).toBeTruthy();
});
+ test('non direct object instances nested to instance do not become proxies', async () => {
+ await page.waitForSelector('[data-should-not-proxy]');
+ const element = await page.$('[data-should-not-proxy]');
+ expect(element).toBeTruthy();
+ });
+
test('context arrays become proxies', async () => {
await page.waitForSelector('[data-context-array]');
const element = await page.$('[data-context-array]');
expect(element).toBeTruthy();
});
-
+
test('objects nested to context arrays become proxies', async () => {
await page.waitForSelector('[data-context-array-zero]');
const element = await page.$('[data-context-array-zero]');
expect(element).toBeTruthy();
});
-
+
test('objects nested to context arrays become proxies', async () => {
await page.waitForSelector('[data-context-array-zero-object]');
const element = await page.$('[data-context-array-zero-object]');
expect(element).toBeTruthy();
});
-
+
test('context objects become proxies', async () => {
await page.waitForSelector('[data-context-object]');
const element = await page.$('[data-context-object]');
expect(element).toBeTruthy();
});
-
+
test('arrays nested to context objects become proxies', async () => {
await page.waitForSelector('[data-context-object-array]');
const element = await page.$('[data-context-object-array]');
expect(element).toBeTruthy();
});
+ test('non direct object instances nested to context do not become proxies', async () => {
+ await page.waitForSelector('[data-context-should-not-proxy]');
+ const element = await page.$('[data-context-should-not-proxy]');
+ expect(element).toBeTruthy();
+ });
+
});
\ No newline at end of file
diff --git a/tests/src/OptimizedEvents.njs b/tests/src/OptimizedEvents.njs
new file mode 100644
index 00000000..69578727
--- /dev/null
+++ b/tests/src/OptimizedEvents.njs
@@ -0,0 +1,47 @@
+import Nullstack from 'nullstack';
+
+class OptimizedEvents extends Nullstack {
+
+ count = 0
+
+ clickWhenEven() {
+ this.lastClick = 'even'
+ }
+
+ clickWhenOdd() {
+ this.lastClick = 'odd'
+ }
+
+ incrementCount() {
+ this.count++
+ }
+
+ doubleCount({ data }) {
+ this.count += data.count
+ }
+
+ eventAfterRendered() {
+ this.worksAfterRender = true
+ }
+
+ render() {
+ return (
+
+ {this.count === 1 &&
+
+
+
+ }
+
+
+
+ {this.count === 0 ? : }
+
+
+
+ )
+ }
+
+}
+
+export default OptimizedEvents;
\ No newline at end of file
diff --git a/tests/src/OptimizedEvents.test.js b/tests/src/OptimizedEvents.test.js
new file mode 100644
index 00000000..8567b939
--- /dev/null
+++ b/tests/src/OptimizedEvents.test.js
@@ -0,0 +1,77 @@
+describe('OptimizedEvents', () => {
+
+ beforeEach(async () => {
+ await page.goto('http://localhost:6969/optimized-events');
+ });
+
+ test('events are triggered', async () => {
+ await page.click('[data-increment-count]')
+ await page.waitForSelector('[data-count="1"]');
+ const element = await page.$('[data-count="1"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('events take the current attributes', async () => {
+ await page.click('[data-increment-count]')
+ await page.waitForSelector('[data-count="1"]');
+ await page.click('[data-double-count]')
+ await page.waitForSelector('[data-count="2"]');
+ const element = await page.$('[data-count="2"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('events are triggered in elements that were added late to the dom', async () => {
+ await page.click('[data-increment-count]')
+ await page.waitForSelector('[data-after-render]');
+ await page.click('[data-after-render]')
+ await page.waitForSelector('[data-works-after-rendered]');
+ const element = await page.$('[data-works-after-rendered]');
+ expect(element).toBeTruthy();
+ });
+
+ test('inline events are triggered with current values', async () => {
+ await page.click('[data-increment-count]')
+ await page.waitForSelector('[data-count="1"]');
+ await page.click('[data-set-count]')
+ await page.waitForSelector('[data-count="11"]');
+ const element = await page.$('[data-count="11"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('events can change references', async () => {
+ await page.click('[data-even-odd]')
+ await page.waitForSelector('[data-last-click="even"]');
+ const element = await page.$('[data-last-click="even"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('events can change references', async () => {
+ await page.click('[data-increment-count]')
+ await page.waitForSelector('[data-count="1"]');
+ await page.click('[data-even-odd]')
+ await page.waitForSelector('[data-last-click="odd"]');
+ const element = await page.$('[data-last-click="odd"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('events are removed if attribute becomes undefined', async () => {
+ await page.click('[data-zero-only-increment]')
+ await page.waitForSelector('[data-count="1"]');
+ await page.click('[data-zero-only-increment]')
+ await page.waitForTimeout(1000)
+ await page.waitForSelector('[data-count="1"]');
+ const element = await page.$('[data-count="1"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('events are removed in ternaries', async () => {
+ await page.click('[data-zero-nothing-increment]')
+ await page.waitForSelector('[data-count="1"]');
+ await page.click('[data-zero-nothing-increment]')
+ await page.waitForTimeout(1000)
+ await page.waitForSelector('[data-count="1"]');
+ const element = await page.$('[data-count="1"]');
+ expect(element).toBeTruthy();
+ });
+
+});
\ No newline at end of file
diff --git a/tests/src/ParentComponent.njs b/tests/src/ParentComponent.njs
index 94b6b718..c83a1818 100644
--- a/tests/src/ParentComponent.njs
+++ b/tests/src/ParentComponent.njs
@@ -1,8 +1,8 @@
import Nullstack from 'nullstack';
class ParentComponent extends Nullstack {
-
- static async getParentThis() {
+
+ static async getParentThis(context) {
return this.name;
}
diff --git a/tests/src/PersistentComponent.njs b/tests/src/PersistentComponent.njs
index 5aafb619..ad491bb0 100644
--- a/tests/src/PersistentComponent.njs
+++ b/tests/src/PersistentComponent.njs
@@ -13,8 +13,8 @@ class PersistentComponent extends Nullstack {
this.count = -1;
}
- launch({ self }) {
- if (self.initiated) {
+ launch() {
+ if (this.initiated) {
this.launchCount++
}
}
@@ -27,21 +27,17 @@ class PersistentComponent extends Nullstack {
this.count++
}
- self({ self }) {
- return self
- }
-
- render({ self, instances }) {
+ render({ instances }) {
const aCount = instances['PersistentComponent/0-0-33/persistent-component/a']?.count
- const aTerminated = instances['PersistentComponent/0-0-33/persistent-component/a']?.self?.()?.terminated
+ const aTerminated = instances['PersistentComponent/0-0-33/persistent-component/a']?.terminated
return (
a
diff --git a/tests/src/PersistentComponent.test.js b/tests/src/PersistentComponent.test.js
index 6a95a3d9..3d217897 100644
--- a/tests/src/PersistentComponent.test.js
+++ b/tests/src/PersistentComponent.test.js
@@ -10,7 +10,7 @@ describe('PersistentComponent instantiated', () => {
expect(element).toBeTruthy();
});
- test('persistent components self should have a key persistent', async () => {
+ test('persistent components instance should have a property called persistent', async () => {
await page.waitForSelector('[data-persistent]');
const element = await page.$('[data-persistent]');
expect(element).toBeTruthy();
@@ -45,7 +45,7 @@ describe('PersistentComponent terminated', () => {
expect(element).toBeTruthy();
});
- test('persistent instanes self should have a terminated key when off dom', async () => {
+ test('persistent instanes instance terminated should be true when off dom', async () => {
await page.waitForSelector('[data-a-terminated]');
const element = await page.$('[data-a-terminated]');
expect(element).toBeTruthy();
@@ -94,13 +94,13 @@ describe('PersistentComponent reinstantiated', () => {
expect(element).toBeTruthy();
});
- test('persistent components self should have a key persistent when reinstantiated', async () => {
+ test('persistent components instance should have a property called persistent when reinstantiated', async () => {
await page.waitForSelector('[data-persistent]');
const element = await page.$('[data-persistent]');
expect(element).toBeTruthy();
});
- test('persistent components self should have a key prerendered when prerendered then reinstantiated', async () => {
+ test('persistent components instance should have a property called prerendered when prerendered then reinstantiated', async () => {
await page.waitForSelector('[data-prerendered]');
const element = await page.$('[data-prerendered]');
expect(element).toBeTruthy();
diff --git a/tests/src/Refs.njs b/tests/src/Refs.njs
new file mode 100644
index 00000000..35a59b48
--- /dev/null
+++ b/tests/src/Refs.njs
@@ -0,0 +1,42 @@
+import Nullstack from 'nullstack';
+
+class Refs extends Nullstack {
+
+ composedComputed = '_composedComputed'
+
+ hydrate() {
+ this.id = this._element.id
+ }
+
+ setRef({ element, refInstanceCount, id }) {
+ this.refReceivedProps = element.id === id
+ this._function = element
+ this.isOnDOM = element.offsetHeight > 0 && refInstanceCount
+ }
+
+ renderBubble({ ref }) {
+ return (
+
+ )
+ }
+
+ changeInstance(context) {
+ context.refInstanceCount++
+ }
+
+ render({ refInstanceCount }) {
+ return (
+
+
+
+
+ span
+
+
+
+ )
+ }
+
+}
+
+export default Refs;
\ No newline at end of file
diff --git a/tests/src/Refs.test.js b/tests/src/Refs.test.js
new file mode 100644
index 00000000..b0069952
--- /dev/null
+++ b/tests/src/Refs.test.js
@@ -0,0 +1,73 @@
+describe('Refs', () => {
+
+ beforeEach(async () => {
+ await page.goto('http://localhost:6969/');
+ await page.click('[href="/refs"]')
+ });
+
+ test('refs should be loaded during hydrate', async () => {
+ await page.waitForSelector('[data-id="hydrate-element"]');
+ const element = await page.$('[data-id="hydrate-element"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs accept composed computed references', async () => {
+ await page.waitForSelector('[data-id="composed-computed"]');
+ const element = await page.$('[data-id="composed-computed"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs accept logical computed references', async () => {
+ await page.waitForSelector('[data-id="logical-computed"]');
+ const element = await page.$('[data-id="logical-computed"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs accept literal computed references', async () => {
+ await page.waitForSelector('[data-id="literal-computed"]');
+ const element = await page.$('[data-id="literal-computed"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs functions receive an element as argument', async () => {
+ await page.waitForSelector('[data-id="function"]');
+ const element = await page.$('[data-id="function"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs functions receive attributes as argument', async () => {
+ await page.waitForSelector('[data-ref-received-props]');
+ const element = await page.$('[data-ref-received-props]');
+ expect(element).toBeTruthy();
+ });
+
+
+ test('refs functions only run after the element is appended do DOM', async () => {
+ await page.waitForSelector('[data-dom="0"]');
+ const element = await page.$('[data-dom="0"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs can be bubbled down', async () => {
+ await page.waitForSelector('[data-id="bubble"]');
+ const element = await page.$('[data-id="bubble"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs functions run when the ref object changes', async () => {
+ await page.waitForSelector('[data-dom="0"]');
+ await page.click("button")
+ await page.waitForSelector('[data-dom="1"]');
+ const element = await page.$('[data-dom="1"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('refs are reassigned when the ref object changes ', async () => {
+ await page.waitForSelector('[data-dom="0"]');
+ await page.click("button")
+ await page.waitForSelector('[data-id="hydrate-element"][data-instance="1"]');
+ const element = await page.$('[data-id="hydrate-element"][data-instance="1"]');
+ expect(element).toBeTruthy();
+ });
+
+});
\ No newline at end of file
diff --git a/tests/src/RenderableComponent.njs b/tests/src/RenderableComponent.njs
index b3fbf2c4..ffdbf145 100644
--- a/tests/src/RenderableComponent.njs
+++ b/tests/src/RenderableComponent.njs
@@ -6,16 +6,23 @@ class RenderableComponent extends Nullstack {
return
}
- renderInnerComponent({ children }) {
+ renderInnerComponent({ children, reference: Reference }) {
return (
Inner Component
+
{children}
)
}
+ renderInnerReference({ prop }) {
+ return (
+
+ )
+ }
+
renderFalsy() {
return false;
}
@@ -37,7 +44,7 @@ class RenderableComponent extends Nullstack {
element tag
-
+
children
diff --git a/tests/src/RenderableComponent.test.js b/tests/src/RenderableComponent.test.js
index f05f71ad..307ffaf4 100644
--- a/tests/src/RenderableComponent.test.js
+++ b/tests/src/RenderableComponent.test.js
@@ -84,6 +84,11 @@ describe('RenderableComponent', () => {
expect(element).toBeFalsy();
});
+ test('inner components can be referenced and receive props', async () => {
+ const element = await page.$('[data-reference]');
+ expect(element).toBeTruthy();
+ });
+
});
describe('RenderableComponent ?condition=true', () => {
diff --git a/tests/src/RouteScroll.njs b/tests/src/RouteScroll.njs
new file mode 100644
index 00000000..f40caab5
--- /dev/null
+++ b/tests/src/RouteScroll.njs
@@ -0,0 +1,37 @@
+import Nullstack from 'nullstack';
+
+class ClassRoute extends Nullstack {
+ render() {
+ return (
+
+
#bottom
+
+ big ass div in a class
+
+
bottom div
+
big ass div in a function
+}
+
+class RouteScroll extends Nullstack {
+
+ render({ params }) {
+ return (
+
+ )
+ }
+
+}
+
+export default RouteScroll;
\ No newline at end of file
diff --git a/tests/src/RoutesAndParams.njs b/tests/src/RoutesAndParams.njs
index a694ac96..16a073e3 100644
--- a/tests/src/RoutesAndParams.njs
+++ b/tests/src/RoutesAndParams.njs
@@ -3,6 +3,32 @@ class RoutesAndParams extends Nullstack {
paramHydrated = false;
+ initiate({ router, params }) {
+ if (params.parent) {
+ router.url = '../parent'
+ } else if (params.current) {
+ router.url = './current'
+ } else if (params.https) {
+ router.url = 'https://nullstack.app/'
+ } else if (params.http) {
+ router.url = 'http://localhost:6969/http'
+ } else if (params.same) {
+ router.url = '//localhost:6969/routes-and-params/href-same-protocol'
+ } else if (params.ftp) {
+ router.url = 'ftp://nullstack.app/'
+ } else if (params.tel) {
+ router.url = 'tel:1555696969'
+ } else if (params.mailto) {
+ router.url = 'mailto:contact@nullstack.app'
+ } else if (params.relative) {
+ router.url = 'relative'
+ } else if (params.relativeComposed) {
+ router.url = 'relative/6969'
+ } else if (params.root) {
+ router.url = '/root/6969'
+ }
+ }
+
hydrate(context) {
const { router, params } = context;
this.paramHydrated = params.id === 'a';
@@ -48,13 +74,31 @@ class RoutesAndParams extends Nullstack {
router.url = 'https://nullstack.app';
}
- render({ router, params, eventTriggered, self }) {
+ renderHrefs() {
+ return (
+ <>
+ Nullstack HTTPS
+ Nullstack HTTP
+ Nullstack SAME
+ Nullstack FTP
+ Nullstack TEL
+ Nullstack MAILTO
+ Nullstack RELATIVE
+ Nullstack RELATIVE TWO
+ Nullstack ROOT
+ Nullstack CURRENT DIR
+ Nullstack PARENT DIR
+
+ )
+ }
+
+ render({ router, params, eventTriggered }) {
return (
-
Nullstack
+
hash
-
+
diff --git a/tests/src/RoutesAndParams.test.js b/tests/src/RoutesAndParams.test.js
index 847fbdd0..d3162d25 100644
--- a/tests/src/RoutesAndParams.test.js
+++ b/tests/src/RoutesAndParams.test.js
@@ -1,3 +1,9 @@
+beforeAll(async () => {
+ await page.on('dialog', async dialog => {
+ await dialog.dismiss();
+ })
+});
+
describe('RoutesAndParams /routes-and-params', () => {
beforeAll(async () => {
@@ -5,7 +11,7 @@ describe('RoutesAndParams /routes-and-params', () => {
});
test('router has a base key', async () => {
- const element = await page.$('[data-base="http://localhost:6969"]');
+ const element = await page.$('[data-base="https://localhost:6969"]');
expect(element).toBeTruthy();
});
@@ -193,21 +199,6 @@ describe('RoutesAndParams /routes-and-params/d?boolean=true#hash spa', () => {
});
-describe('RoutesAndParams /routes-and-params', () => {
-
- beforeAll(async () => {
- await page.goto('http://localhost:6969/routes-and-params');
- });
-
- test('a with absolute hrefs cause a hard redirect', async () => {
- await page.click('[href="https://nullstack.app"]');
- await page.waitForSelector('[href="/contributors"]');
- const url = await page.url();
- expect(url).toMatch('https://nullstack.app');
- });
-
-});
-
describe('RoutesAndParams /routes-and-params', () => {
beforeAll(async () => {
@@ -275,4 +266,209 @@ describe('RoutesAndParams /routes-and-params/inner-html', () => {
expect(element).toBeTruthy();
});
-});
\ No newline at end of file
+});
+
+describe('RoutesAndParams /routes-and-params/hrefs spa', () => {
+
+ beforeEach(async () => {
+ await page.goto('http://localhost:6969/routes-and-params/hrefs');
+ });
+
+ test('https urls do a full redirect', async () => {
+ await Promise.all([
+ page.click('[href="https://nullstack.app/"]'),
+ page.waitForNavigation(),
+ ]);
+ const url = await page.url();
+ expect(url).toMatch('://nullstack.app');
+ });
+
+ test('http urls do a full redirect', async () => {
+ await Promise.all([
+ page.click('[href="http://nullstack.app/"]'),
+ page.waitForNavigation(),
+ ]);
+ const url = await page.url();
+ expect(url).toMatch('://nullstack.app');
+ });
+
+ test('// urls do a full redirect', async () => {
+ await Promise.all([
+ page.click('[href="//nullstack.app/"]'),
+ page.waitForNavigation(),
+ ]);
+ const url = await page.url();
+ expect(url).toMatch('://nullstack.app');
+ });
+
+ // test('ftp urls do not redirect', async () => {
+ // await page.click('[href="ftp://nullstack.app/"]'),
+ // await page.waitForSelector('[data-ftp-clicked]');
+ // const element = await page.$('[data-ftp-clicked]');
+ // expect(element).toBeTruthy();
+ // });
+
+ // test('tel urls do not redirect', async () => {
+ // await page.click('[href="tel:1555696969"]'),
+ // await page.waitForSelector('[data-tel-clicked]');
+ // const element = await page.$('[data-tel-clicked]');
+ // expect(element).toBeTruthy();
+ // });
+
+ // test('mailto urls do not redirect', async () => {
+ // await page.click('[href="mailto:contact@nullstack.app"]'),
+ // await page.waitForSelector('[data-mailto-clicked]');
+ // const element = await page.$('[data-mailto-clicked]');
+ // expect(element).toBeTruthy();
+ // });
+
+ test('relative urls redirect', async () => {
+ await Promise.all([
+ page.click('[href="relative"]'),
+ page.waitForNavigation(),
+ ])
+ const url = await page.url();
+ expect(url).toEqual('http://localhost:6969/routes-and-params/relative');
+ });
+
+ test('relative composed urls redirect', async () => {
+ await Promise.all([
+ page.click('[href="relative/6969"]'),
+ page.waitForNavigation(),
+ ])
+ const url = await page.url();
+ expect(url).toEqual('http://localhost:6969/routes-and-params/relative/6969');
+ });
+
+ test('root urls redirect', async () => {
+ await Promise.all([
+ page.click('[href="/root/6969"]'),
+ page.waitForNavigation(),
+ ])
+ const url = await page.url();
+ expect(url).toEqual('http://localhost:6969/root/6969');
+ });
+
+ test('current urls redirect', async () => {
+ await Promise.all([
+ page.click('[href="./current"]'),
+ page.waitForNavigation(),
+ ])
+ const url = await page.url();
+ expect(url).toEqual('http://localhost:6969/routes-and-params/current');
+ });
+
+ test('parent urls redirect', async () => {
+ await Promise.all([
+ page.click('[href="../parent"]'),
+ page.waitForNavigation(),
+ ])
+ const url = await page.url();
+ expect(url).toEqual('http://localhost:6969/parent');
+ });
+
+});
+
+
+// describe('RoutesAndParams /routes-and-params/hrefs ssr', () => {
+
+// test('ssr parent', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?parent=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/parent');
+// });
+
+// test('ssr current', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?current=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/routes-and-params/current');
+// });
+
+// test('ssr https', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?https=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('https://nullstack.app/');
+// });
+
+// test('ssr http', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?http=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/http');
+// });
+
+// test('ssr same', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?same=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/routes-and-params/href-same-protocol');
+// });
+
+// // test.skip('ssr ftp', async () => {
+// // await Promise.all([
+// // page.goto('http://localhost:6969/routes-and-params/hrefs?ftp=1'),
+// // page.waitForNavigation(),
+// // ]);
+// // const url = await page.url();
+// // expect(url).toEqual('https://nullstack.app/');
+// // });
+
+// // test.skip('ssr tel', async () => {
+// // await Promise.all([
+// // page.goto('http://localhost:6969/routes-and-params/hrefs?tel=1'),
+// // page.waitForNavigation(),
+// // ]);
+// // const url = await page.url();
+// // expect(url).toEqual('https://nullstack.app/');
+// // });
+
+// // test.skip('ssr mailto', async () => {
+// // await Promise.all([
+// // page.goto('http://localhost:6969/routes-and-params/hrefs?mailto=1'),
+// // page.waitForNavigation(),
+// // ]);
+// // const url = await page.url();
+// // expect(url).toEqual('https://nullstack.app/');
+// // });
+
+// test('ssr relative', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?relative=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/routes-and-params/relative');
+// });
+
+// test('ssr relativeComposed', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?relativeComposed=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/routes-and-params/relative/6969');
+// });
+
+// test('ssr root', async () => {
+// await Promise.all([
+// page.goto('http://localhost:6969/routes-and-params/hrefs?root=1'),
+// page.waitForNavigation(),
+// ]);
+// const url = await page.url();
+// expect(url).toEqual('http://localhost:6969/root/6969');
+// });
+
+// });
diff --git a/tests/src/ServerFunctions.njs b/tests/src/ServerFunctions.njs
index c9d391f0..325817a5 100644
--- a/tests/src/ServerFunctions.njs
+++ b/tests/src/ServerFunctions.njs
@@ -63,10 +63,15 @@ class ServerFunctions extends Nullstack {
return true
}
+ static async getRequestUrl({ request }) {
+ return request.originalUrl.startsWith('/')
+ }
+
async initiate() {
this.statement = await this.useNodeFileSystem();
this.response = await this.useFetchInNode();
this.doublePlusOneServer = await ServerFunctions.getDoublePlusOne({ number: 34 })
+ this.originalUrl = await ServerFunctions.getRequestUrl()
}
async hydrate() {
@@ -74,11 +79,12 @@ class ServerFunctions extends Nullstack {
this.clientOnly = clientOnly();
this.doublePlusOneClient = await ServerFunctions.getDoublePlusOne({ number: 34 })
this.acceptsSpecialCharacters = await this.getEncodedString({ string: decodedString })
+ this.hydratedOriginalUrl = await ServerFunctions.getRequestUrl()
}
render() {
return (
-
+
@@ -91,6 +97,8 @@ class ServerFunctions extends Nullstack {
+
+
)
}
diff --git a/tests/src/ServerFunctions.test.js b/tests/src/ServerFunctions.test.js
index 14608f57..4e40f30c 100644
--- a/tests/src/ServerFunctions.test.js
+++ b/tests/src/ServerFunctions.test.js
@@ -1,10 +1,12 @@
-beforeAll(async () => {
- await page.goto('http://localhost:6969/server-functions');
-});
-
describe('ServerFunctions', () => {
+ beforeEach(async () => {
+ await page.goto('http://localhost:6969/server-functions');
+ });
+
+
test('instance can use returned values', async () => {
+ await page.waitForSelector('[data-hydrated]')
await page.click('.set-count-to-one');
await page.waitForSelector('[data-count="1"]');
const element = await page.$('[data-count="1"]');
@@ -12,6 +14,7 @@ describe('ServerFunctions', () => {
});
test('server functions accept an object as argument', async () => {
+ await page.waitForSelector('[data-hydrated]')
await page.click('.set-count-to-two');
await page.waitForSelector('[data-count="2"]');
const element = await page.$('[data-count="2"]');
@@ -19,6 +22,7 @@ describe('ServerFunctions', () => {
});
test('server functions serialize and deserialize dates', async () => {
+ await page.waitForSelector('[data-hydrated]')
await page.click('.set-date');
await page.waitForSelector('[data-year="1992"]');
const element = await page.$('[data-year="1992"]');
@@ -66,4 +70,16 @@ describe('ServerFunctions', () => {
expect(element).toBeTruthy();
});
+ test('static server functions receive the context on spa', async () => {
+ await page.waitForSelector('[data-hydrated-original-url]');
+ const element = await page.$('[data-hydrated-original-url]');
+ expect(element).toBeTruthy();
+ });
+
+ test('static server functions receive the context on ssr', async () => {
+ await page.waitForSelector('[data-original-url]');
+ const element = await page.$('[data-original-url]');
+ expect(element).toBeTruthy();
+ });
+
});
\ No newline at end of file
diff --git a/tests/src/ServerRequestAndResponse.njs b/tests/src/ServerRequestAndResponse.njs
index 1cdf7c39..302b2d55 100644
--- a/tests/src/ServerRequestAndResponse.njs
+++ b/tests/src/ServerRequestAndResponse.njs
@@ -19,12 +19,15 @@ class ServerRequestAndResponse extends Nullstack {
const response = await fetch('/api', { method, body });
responses[`data-${method.toLowerCase()}`] = response.status === 200;
}
+ const response = await fetch('/custom-api-before-start')
+ const data = await response.json()
+ this.startValue = data.startValue
this.responses = responses;
}
render() {
return (
-
+
)
}
diff --git a/tests/src/ServerRequestandResponse.test.js b/tests/src/ServerRequestandResponse.test.js
index 40d598f1..ffd1bf4e 100644
--- a/tests/src/ServerRequestandResponse.test.js
+++ b/tests/src/ServerRequestandResponse.test.js
@@ -5,13 +5,13 @@ beforeAll(async () => {
describe('ServerRequestAndResponse', () => {
test('the port key makes server run in the defined port', async () => {
- const response = await page.goto('http://localhost:6969');
+ const response = await page.goto('http://localhost:6969', { waitUntil: "networkidle0" });
const status = response.status();
expect([200, 304]).toContain(status);
});
test('server accepts use of middlewares', async () => {
- const response = await page.goto('http://localhost:6969/api');
+ const response = await page.goto('http://localhost:6969/api', { waitUntil: "networkidle0" });
const status = response.status();
expect([200, 304]).toContain(status);
});
@@ -56,4 +56,9 @@ describe('ServerRequestAndResponse', () => {
expect(element).toBeFalsy();
});
+ test('server middlewares run context start', async () => {
+ const element = await page.$('[data-start-value]');
+ expect(element).toBeFalsy();
+ });
+
});
\ No newline at end of file
diff --git a/tests/src/StatefulComponent.njs b/tests/src/StatefulComponent.njs
index 988c625f..4b3eb6c3 100644
--- a/tests/src/StatefulComponent.njs
+++ b/tests/src/StatefulComponent.njs
@@ -21,11 +21,24 @@ class StatefulComponent extends Nullstack {
this.count++;
}
- render({ self }) {
+ render() {
return (
-
)
}
diff --git a/tests/src/StatefulComponent.test.js b/tests/src/StatefulComponent.test.js
index d39d4802..ab390015 100644
--- a/tests/src/StatefulComponent.test.js
+++ b/tests/src/StatefulComponent.test.js
@@ -50,7 +50,7 @@ describe('StatefulComponent', () => {
test('empty strings generate nodes', async () => {
await page.click('[data-fill]');
await page.waitForSelector('[data-empty="not"]');
- const text = await page.$eval('[data-empty="not"]', (e) => e.innerText);
+ const text = await page.$eval('[data-empty="not"]', (e) => e.textContent);
expect(text).toMatch('not');
});
@@ -64,4 +64,35 @@ describe('StatefulComponent', () => {
expect(hasConsoleError).toBeFalsy();
});
+ test('textareas with multiple nodes become a single node', async () => {
+ const text = await page.$eval('textarea', (e) => e.value);
+ expect(text).toMatch(' 1 1 ');
+ });
+
+ test('textareas with multiple nodes can be updated', async () => {
+ await page.click('.increment-by-one');
+ await page.waitForSelector('[data-count="2"]');
+ const text = await page.$eval('textarea', (e) => e.value);
+ expect(text).toMatch(' 2 2 ');
+ });
+
+ test('children of style become the tags html attribute', async () => {
+ await page.click('.increment-by-one');
+ await page.waitForSelector('[data-count="2"]');
+ const text = await page.$eval('button', (e) => getComputedStyle(e).backgroundColor);
+ expect(text).toMatch('rgba(0, 0, 0, 0.2)');
+ });
+
+ test('attributes can prerender a zero', async () => {
+ await page.waitForSelector('[data-zero="0"]');
+ const element = await page.$('[data-zero="0"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('attributes can rererender a zero', async () => {
+ await page.waitForSelector('[data-hydrated-zero="0"]');
+ const element = await page.$('[data-hydrated-zero="0"]');
+ expect(element).toBeTruthy();
+ });
+
});
\ No newline at end of file
diff --git a/tests/src/TextObserver.njs b/tests/src/TextObserver.njs
new file mode 100644
index 00000000..91f8e061
--- /dev/null
+++ b/tests/src/TextObserver.njs
@@ -0,0 +1,38 @@
+import Nullstack from 'nullstack';
+
+class TextObserver extends Nullstack {
+
+ unmutatedText = 'default'
+ mutatedText = 'default'
+
+ hydrate() {
+ const config = {
+ characterData: true,
+ childList: true,
+ subtree: true,
+ };
+ const observer = new MutationObserver((mutationsList, observer) => {
+ for (const mutation of mutationsList) {
+ mutation.target.parentElement.dataset.mutated = true
+ }
+ observer.disconnect();
+ });
+ for (const element of [...document.querySelectorAll('[data-text-observer]')]) {
+ observer.observe(element, config);
+ }
+ this.mutatedText = 'mutated'
+ }
+
+ render() {
+ return (
+
+ regular text
+ {this.unmutatedText}
+ {this.mutatedText}
+
+ )
+ }
+
+}
+
+export default TextObserver;
\ No newline at end of file
diff --git a/tests/src/TextObserver.test.js b/tests/src/TextObserver.test.js
new file mode 100644
index 00000000..e2f0f31f
--- /dev/null
+++ b/tests/src/TextObserver.test.js
@@ -0,0 +1,23 @@
+beforeAll(async () => {
+ await page.goto('http://localhost:6969/text-observer');
+ await page.waitForSelector('[data-mutated]')
+});
+
+describe('TextObserver', () => {
+
+ test('regular text should never be mutated', async () => {
+ const element = await page.$('[data-regular-text]:not([data-mutated])');
+ expect(element).toBeTruthy();
+ });
+
+ test('unmutated text should not be mutated', async () => {
+ const element = await page.$('[data-unmutated-text]:not([data-mutated])');
+ expect(element).toBeTruthy();
+ });
+
+ test('mutated text should be mutated and redundancy should be redundant', async () => {
+ const element = await page.$('[data-mutated-text][data-mutated]');
+ expect(element).toBeTruthy();
+ });
+
+});
\ No newline at end of file
diff --git a/tests/src/TwoWayBindings.njs b/tests/src/TwoWayBindings.njs
index 7875cf08..b95e60f0 100644
--- a/tests/src/TwoWayBindings.njs
+++ b/tests/src/TwoWayBindings.njs
@@ -1,4 +1,5 @@
import Nullstack from 'nullstack';
+import TwoWayBindingsExternalComponent from './TwoWayBindingsExternalComponent';
class TwoWayBindings extends Nullstack {
@@ -11,48 +12,94 @@ class TwoWayBindings extends Nullstack {
object = { count: 1 };
array = ['a', 'b', 'c'];
- parse({ event, onchange }) {
+ byKeyName = 'byKeyNameValue'
+ keyName = 'byKeyName'
+
+ zero = 0
+
+ bringsHappiness = false
+
+ external = 'external'
+
+ debouncedBind = '69'
+ debouncedObject = '69'
+ debouncedEvent = '69'
+ debounceTime = 1000
+
+ parse({ event, source: bind, callback }) {
const normalized = event.target.value.replace(',', '').padStart(3, '0');
const whole = (parseInt(normalized.slice(0, -2)) || 0).toString();
const decimal = normalized.slice(normalized.length - 2);
const value = parseFloat(whole + '.' + decimal);
- const bringsHappyness = value >= 1000000;
- onchange({ value, bringsHappyness });
+ const bringsHappiness = value >= 1000000;
+ bind.object[bind.property] = value
+ callback({ bringsHappiness })
}
- renderCurrencyInput({ value, name }) {
- const formatted = value.toFixed(2).replace('.', ',');
- return
+ renderCurrencyInput({ bind, onchange }) {
+ const formatted = bind.object[bind.property].toFixed(2).replace('.', ',');
+ return
+ }
+
+ renderBubble({ bind }) {
+ return (
+
+ )
}
updateCharacter({ value }) {
this.character = this.array[value];
}
+ setHappiness({ bringsHappiness }) {
+ this.bringsHappiness = bringsHappiness
+ }
+
+ debouncedEventHandler({ event }) {
+ if (event.type === 'click') {
+ this.debouncedEvent = '6969'
+ }
+ }
+
render({ params }) {
return (
-
+
)
}
diff --git a/tests/src/TwoWayBindings.test.js b/tests/src/TwoWayBindings.test.js
index 10bb636a..d46091d8 100644
--- a/tests/src/TwoWayBindings.test.js
+++ b/tests/src/TwoWayBindings.test.js
@@ -1,8 +1,13 @@
-beforeAll(async () => {
- await page.goto('http://localhost:6969/two-way-bindings?page=1');
-});
+describe('TwoWayBindings', () => {
-describe('ContextPage', () => {
+ beforeEach(async () => {
+ await page.goto('http://localhost:6969/two-way-bindings?page=1');
+ });
+
+ test('inputs can be bound to zero', async () => {
+ const element = await page.$('[value="0"]');
+ expect(element).toBeTruthy();
+ });
test('bind adds a name attribute to the element', async () => {
const element = await page.$('[name="number"]');
@@ -24,6 +29,27 @@ describe('ContextPage', () => {
expect(value).toMatch('aaaa');
});
+ test('textareas value reflects variable changes', async () => {
+ await page.click('[data-textarea]')
+ await page.waitForSelector('textarea[data-text="bbbb"]')
+ const value = await page.$eval('[name="text"]', (element) => element.value);
+ expect(value).toMatch('bbbb');
+ });
+
+ test('checkboxes value reflects variable changes', async () => {
+ await page.click('[data-checkbox]')
+ await page.waitForSelector('input[type=checkbox]:not(:checked)')
+ const element = await page.$('input[type=checkbox]:not(:checked)')
+ expect(element).toBeTruthy();
+ });
+
+ test('select value reflects variable changes', async () => {
+ await page.click('[data-select]')
+ await page.waitForSelector('[data-character="b"]')
+ const value = await page.$eval('select', (element) => element.value);
+ expect(value).toMatch('b');
+ });
+
test('selects can be bound', async () => {
const value = await page.$eval('[name="character"]', (element) => element.value);
expect(value).toMatch('a');
@@ -50,7 +76,7 @@ describe('ContextPage', () => {
});
test('custom inputs can be bound', async () => {
- const value = await page.$eval('[name="currency"]', (element) => element.value);
+ const value = await page.$eval('[data-currency]', (element) => element.value);
expect(value).toMatch('100,00');
});
@@ -73,17 +99,121 @@ describe('ContextPage', () => {
});
test('bind keeps the primitive type of the variable', async () => {
+ await page.type('[name="number"]', '2');
await page.waitForSelector('[data-number-type="number"]');
const element = await page.$('[data-number-type="number"]');
expect(element).toBeTruthy();
});
test('bound inputs can have custom events that triger after the value is set', async () => {
+ await page.type('[name="number"]', '2');
await page.waitForSelector('[data-character="b"]');
const element = await page.$('[data-character="b"]');
expect(element).toBeTruthy();
});
- // test extra params bringHappiness
+ test('developers can create custom bindable components', async () => {
+ await page.type('[data-currency]', '696969696969');
+ await page.waitForSelector('[data-brings-happiness]')
+ const element = await page.$('[data-brings-happiness]');
+ expect(element).toBeTruthy();
+ });
+
+ test('bind should accept composed computed properties', async () => {
+ const value = await page.$eval('[name="composedComputed"]', (element) => element.value);
+ expect(value).toMatch('byKeyNameValue');
+ });
+
+ test('bind should accept logical computed properties', async () => {
+ const value = await page.$eval('[name="logicalComputed"]', (element) => element.value);
+ expect(value).toMatch('byKeyNameValue');
+ });
+
+ test('bind should accept literal computed properties', async () => {
+ const value = await page.$eval('[name="literalComputed"]', (element) => element.value);
+ expect(value).toMatch('byKeyNameValue');
+ });
+
+ test('bind can be bubbled down', async () => {
+ const value = await page.$eval('[name="bubble"]', (element) => element.value);
+ expect(value).toMatch('byKeyNameValue');
+ });
+
+ test('bind should prerender in external components', async () => {
+ const value = await page.$eval('[name="externalComponent"]', (element) => element.value);
+ expect(value).toMatch('external');
+ });
+
+ test('bind should rerender in external components', async () => {
+ await page.type('[data-value]', 'new');
+ await page.waitForSelector('[data-value="external"]')
+ const value = await page.$eval('[name="externalComponent"]', (element) => element.value);
+ expect(value).toMatch('newexternal');
+ });
+
+ test('bind can be debounced', async () => {
+ await page.type('[data-debounced-bind]', '69');
+ await page.waitForTimeout(1000)
+ const originalValue = await page.$('[data-debounced-bind="69"]');
+ await page.waitForTimeout(1500)
+ const updatedValue = await page.$('[data-debounced-bind="6969"]');
+ expect(originalValue && updatedValue).toBeTruthy();
+ });
+
+ test('object events can be debounced', async () => {
+ await page.click('[data-debounced-object]');
+ await page.waitForTimeout(1000)
+ const originalValue = await page.$('[data-debounced-object="69"]');
+ await page.waitForTimeout(1500)
+ const updatedValue = await page.$('[data-debounced-object="6969"]');
+ expect(originalValue && updatedValue).toBeTruthy();
+ });
+
+ test('events can be debounced', async () => {
+ await page.click('[data-debounced-event]');
+ await page.waitForTimeout(1000)
+ const originalValue = await page.$('[data-debounced-event="69"]');
+ await page.waitForTimeout(1500)
+ const updatedValue = await page.$('[data-debounced-event="6969"]');
+ expect(originalValue && updatedValue).toBeTruthy();
+ });
+
+ test('debounced events keep the reference to the original event', async () => {
+ await page.click('[data-debounced-event]');
+ await page.waitForTimeout(1000)
+ const originalValue = await page.$('[data-debounced-event="69"]');
+ await page.waitForTimeout(1500)
+ const updatedValue = await page.$('[data-debounced-event="6969"]');
+ expect(originalValue && updatedValue).toBeTruthy();
+ });
+
+ test('debounce attribute should not be present in dom during prerender', async () => {
+ const element = await page.$('[data-debounced-event]:not([debounce])');
+ expect(element).toBeTruthy();
+ });
+
+ test('debounce attribute should not be present in dom during render', async () => {
+ await page.waitForSelector('[data-debounced-hydrated]')
+ const element = await page.$('[data-debounced-hydrated]:not([debounce])');
+ expect(element).toBeTruthy();
+ });
+
+ test('debounce attribute should not be present in dom during rerender', async () => {
+ await page.click('[data-debounced-rerender]:not([debounce])');
+ await page.waitForSelector('[data-debounced-rerender="2000"]:not([debounce])')
+ const element = await page.$('[data-debounced-rerender="2000"]:not([debounce])');
+ expect(element).toBeTruthy();
+ });
+
+ test('custom bindable components receive a no op function if no onchange is passed to them', async () => {
+ await page.waitForSelector('[data-onchange="noop"]')
+ const element = await page.$('[data-onchange="noop"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('binding to nested undefined sets the value to an empty string', async () => {
+ const value = await page.$eval('[data-undeclared-nested]', (element) => element.value);
+ expect(value).toMatch('');
+ });
});
\ No newline at end of file
diff --git a/tests/src/TwoWayBindingsExternalComponent.njs b/tests/src/TwoWayBindingsExternalComponent.njs
new file mode 100644
index 00000000..2f4d85fb
--- /dev/null
+++ b/tests/src/TwoWayBindingsExternalComponent.njs
@@ -0,0 +1,15 @@
+import Nullstack from 'nullstack';
+
+class TwoWayBindingsExternalComponent extends Nullstack {
+
+ render({ bind, onchange }) {
+ return (
+
+
+
+ )
+ }
+
+}
+
+export default TwoWayBindingsExternalComponent;
\ No newline at end of file
diff --git a/tests/src/TypeScript.nts b/tests/src/TypeScript.nts
index 1f0cc82b..454ce758 100644
--- a/tests/src/TypeScript.nts
+++ b/tests/src/TypeScript.nts
@@ -17,12 +17,12 @@ class TypeScript extends Nullstack {
return
}
- render({ self }: NullstackClientContext) {
+ render() {
return (
diff --git a/tests/src/TypesScript.test.js b/tests/src/TypesScript.test.js
index 0db7e1e1..235c421b 100644
--- a/tests/src/TypesScript.test.js
+++ b/tests/src/TypesScript.test.js
@@ -24,8 +24,8 @@ describe('UnderscoredAttributes', () => {
});
test('bind should work on nts files', async () => {
- await page.waitForSelector('[bind="count"]');
- const element = await page.$('[bind="count"]');
+ await page.waitForSelector('input');
+ const element = await page.$('input');
expect(element).toBeTruthy();
});
diff --git a/tests/src/UndefinedNodes.test.js b/tests/src/UndefinedNodes.test.js
index d6caed79..3780b59e 100644
--- a/tests/src/UndefinedNodes.test.js
+++ b/tests/src/UndefinedNodes.test.js
@@ -10,7 +10,7 @@ describe('UndefinedNodes WithoutReturn', () => {
describe('UndefinedNodes WithoutUndefinedReturn', () => {
test('renderable functions with undefined return should raise an error', async () => {
- const response = await page.goto('http://localhost:6969/undefined-nodes?withoutUndefinedReturn=true');
+ const response = await page.goto('http://localhost:6969/undefined-nodes?withoutUndefinedReturn=true', { waitUntil: "networkidle0" });
expect(response.status()).toEqual(500)
});
@@ -19,7 +19,7 @@ describe('UndefinedNodes WithoutUndefinedReturn', () => {
describe('UndefinedNodes WithoutRetunr', () => {
test('tagging a renderable function that does not exist should raise an error', async () => {
- const response = await page.goto('http://localhost:6969/undefined-nodes?withoutRetunr=true');
+ const response = await page.goto('http://localhost:6969/undefined-nodes?withoutRetunr=true', { waitUntil: "networkidle0" });
expect(response.status()).toEqual(500)
});
@@ -28,7 +28,7 @@ describe('UndefinedNodes WithoutRetunr', () => {
describe('UndefinedNodes ForgotToImport', () => {
test('tagging a renderable function that was not imported should raise an error', async () => {
- const response = await page.goto('http://localhost:6969/undefined-nodes?forgotToImport=true');
+ const response = await page.goto('http://localhost:6969/undefined-nodes?forgotToImport=true', { waitUntil: "networkidle0" });
expect(response.status()).toEqual(500)
});
diff --git a/tests/src/UnderscoredAttributes.njs b/tests/src/UnderscoredAttributes.njs
index 2b910007..70e1ec5a 100644
--- a/tests/src/UnderscoredAttributes.njs
+++ b/tests/src/UnderscoredAttributes.njs
@@ -10,9 +10,9 @@ const underscoredObject = {
}
}
-function _underscored(value) {
- this.e = value
- }
+function _underscored({ string, value }) {
+ this.e = string === 'nullstack' && value
+}
class UnderscoredAttributes extends Nullstack {
@@ -21,6 +21,11 @@ class UnderscoredAttributes extends Nullstack {
c = 0
d = 0
e = 0
+ f = 0
+
+ prepare() {
+ this._g = 1
+ }
_underscoredMethod(value) {
this.a = value
@@ -32,6 +37,10 @@ class UnderscoredAttributes extends Nullstack {
notUnderscored = _underscored
+ _underscoredEvent() {
+ this.f = 1
+ }
+
hydrate() {
this._underscoredMethod(1)
this._underscoredAttributeFunction(1)
@@ -39,13 +48,17 @@ class UnderscoredAttributes extends Nullstack {
this._underscoredAfterConstructor(1)
this._underscoredObject = underscoredObject
this._underscoredObject.withoutUnderscore(1)
- this.notUnderscored(1)
+ this.notUnderscored({ value: 1 })
+ }
+
+ setEventListener({ element }) {
+ element.addEventListener('click', this._underscoredEvent)
}
render() {
return (
-
-
UnderscoredAttributes
+
+
)
}
diff --git a/tests/src/UnderscoredAttributes.test.js b/tests/src/UnderscoredAttributes.test.js
index 52ad1f92..aec0bd21 100644
--- a/tests/src/UnderscoredAttributes.test.js
+++ b/tests/src/UnderscoredAttributes.test.js
@@ -31,9 +31,22 @@ describe('UnderscoredAttributes', () => {
expect(element).toBeTruthy();
});
- test('keys assigned with a function that name is underscored do not receive the context as argument', async () => {
+ test('keys assigned with a function that name is underscored receive the context as argument', async () => {
const element = await page.$('[data-e="1"]');
expect(element).toBeTruthy();
});
+ test('this is bound to the instance on underscored functions even on events', async () => {
+ await page.waitForSelector('[data-hydrated]')
+ await page.click('[data-hydrated]')
+ await page.waitForSelector('[data-f="1"]')
+ const element = await page.$('[data-f="1"]');
+ expect(element).toBeTruthy();
+ });
+
+ test('underscored variables are serialized for hydration', async () => {
+ const element = await page.$('[data-g="1"]');
+ expect(element).toBeTruthy();
+ });
+
});
\ No newline at end of file
diff --git a/tests/src/scripts/run.js b/tests/src/scripts/run.js
index ecd99a81..97928d5d 100644
--- a/tests/src/scripts/run.js
+++ b/tests/src/scripts/run.js
@@ -1,6 +1,6 @@
process.env.NULLSTACK_ENVIRONMENT_NAME = 'test'
-const { default: application } = require('../../.development/server.js');
+const { default: application } = require('../../.production/server.js');
async function getProjectName() {
await application.start();
diff --git a/types/ClientContext.d.ts b/types/ClientContext.d.ts
index b48ac3bd..f41fbb98 100644
--- a/types/ClientContext.d.ts
+++ b/types/ClientContext.d.ts
@@ -3,7 +3,6 @@ import { NullstackPage } from "./Page";
import { NullstackParams } from "./Params";
import { NullstackProject } from "./Project";
import { NullstackRouter } from "./Router";
-import { NullstackSelf } from "./Self";
import { NullstackSettings } from "./Settings";
import { NullstackWorker } from "./Worker";
@@ -33,14 +32,6 @@ export type NullstackClientContext = {
*/
worker?: NullstackWorker;
- /**
- * It gives you information about the instance lifecycle and it's unique key.
- *
- * @see https://nullstack.app/instance-self
- * @see https://nullstack.app/instance-self#instance-key
- */
- self?: NullstackSelf;
-
/**
* It gives you information about the element dataset.
* Any `data-*` attributes will receive a respective camelized key on this object.
diff --git a/types/Environment.d.ts b/types/Environment.d.ts
index d38b5b7f..f81fd885 100644
--- a/types/Environment.d.ts
+++ b/types/Environment.d.ts
@@ -17,4 +17,12 @@ export type NullstackEnvironment = {
*/
key: string;
+ /**
+ * Event raised when a module is hot replaced.
+ *
+ * @scope client
+ * @see https://nullstack.app/context-environment
+ */
+ event: string;
+
};
\ No newline at end of file
diff --git a/types/JSX.d.ts b/types/JSX.d.ts
index 9e7b4461..429dd2a3 100644
--- a/types/JSX.d.ts
+++ b/types/JSX.d.ts
@@ -48,6 +48,8 @@ export interface Attributes {
html?: string | undefined;
source?: object | undefined;
bind?: any | undefined;
+ debounce?: number | undefined;
+ ref?: any | undefined;
data?: object | undefined;
"data-"?: any;
[key: string]: any;
@@ -60,7 +62,7 @@ export interface NullstackAttributes extends Attributes {
key?: string;
}
-export interface ClassAttributes extends Attributes {}
+export interface ClassAttributes extends Attributes { }
//
// Factories
@@ -68,7 +70,7 @@ export interface ClassAttributes extends Attributes {}
type DetailedHTMLFactory
= P;
-export interface SVGFactory {}
+export interface SVGFactory { }
export type NullstackFragment = NullstackNode[];
export type NullstackNode =
@@ -107,7 +109,7 @@ export interface BaseSyntheticEvent {
* If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
*/
export interface SyntheticEvent
- extends BaseSyntheticEvent {}
+ extends BaseSyntheticEvent { }
export interface DragEvent extends MouseEvent {
dataTransfer: DataTransfer;
@@ -133,7 +135,7 @@ export interface FocusEvent
target: EventTarget & Target;
}
-export interface FormEvent extends SyntheticEvent {}
+export interface FormEvent extends SyntheticEvent { }
export interface ChangeEvent extends SyntheticEvent {
target: EventTarget & T;
@@ -207,8 +209,8 @@ export interface WheelEvent
type EventHandler> =
| object
| {
- bivarianceHack(event: { event: E } & NullstackClientContext): void;
- }["bivarianceHack"];
+ bivarianceHack(event: { event: E } & NullstackClientContext): void;
+ }["bivarianceHack"];
type NullstackEventHandler = EventHandler>;
type DragEventHandler = EventHandler>;
@@ -227,7 +229,7 @@ type WheelEventHandler = EventHandler>;
type DetailedHTMLProps, T> = E;
-export interface SVGProps extends SVGAttributes, ClassAttributes {}
+export interface SVGProps extends SVGAttributes, ClassAttributes { }
export interface DOMAttributes extends Attributes {
// Focus Events
@@ -354,15 +356,15 @@ export interface AriaAttributes {
"aria-controls"?: string | undefined;
/** Indicates the element that represents the current item within a container or set of related elements. */
"aria-current"?:
- | boolean
- | "false"
- | "true"
- | "page"
- | "step"
- | "location"
- | "date"
- | "time"
- | undefined;
+ | boolean
+ | "false"
+ | "true"
+ | "page"
+ | "step"
+ | "location"
+ | "date"
+ | "time"
+ | undefined;
/**
* Identifies the element (or elements) that describes the object.
* @see aria-labelledby
@@ -383,13 +385,13 @@ export interface AriaAttributes {
* @deprecated in ARIA 1.1
*/
"aria-dropeffect"?:
- | "none"
- | "copy"
- | "execute"
- | "link"
- | "move"
- | "popup"
- | undefined;
+ | "none"
+ | "copy"
+ | "execute"
+ | "link"
+ | "move"
+ | "popup"
+ | undefined;
/**
* Identifies the element that provides an error message for the object.
* @see aria-invalid @see aria-describedby.
@@ -409,15 +411,15 @@ export interface AriaAttributes {
"aria-grabbed"?: Booleanish | undefined;
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
"aria-haspopup"?:
- | boolean
- | "false"
- | "true"
- | "menu"
- | "listbox"
- | "tree"
- | "grid"
- | "dialog"
- | undefined;
+ | boolean
+ | "false"
+ | "true"
+ | "menu"
+ | "listbox"
+ | "tree"
+ | "grid"
+ | "dialog"
+ | undefined;
/**
* Indicates whether the element is exposed to an accessibility API.
* @see aria-disabled.
@@ -428,12 +430,12 @@ export interface AriaAttributes {
* @see aria-errormessage.
*/
"aria-invalid"?:
- | boolean
- | "false"
- | "true"
- | "grammar"
- | "spelling"
- | undefined;
+ | boolean
+ | "false"
+ | "true"
+ | "grammar"
+ | "spelling"
+ | undefined;
/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
"aria-keyshortcuts"?: string | undefined;
/**
@@ -489,17 +491,17 @@ export interface AriaAttributes {
* @see aria-atomic.
*/
"aria-relevant"?:
- | "additions"
- | "additions removals"
- | "additions text"
- | "all"
- | "removals"
- | "removals additions"
- | "removals text"
- | "text"
- | "text additions"
- | "text removals"
- | undefined;
+ | "additions"
+ | "additions removals"
+ | "additions text"
+ | "all"
+ | "removals"
+ | "removals additions"
+ | "removals text"
+ | "text"
+ | "text additions"
+ | "text removals"
+ | undefined;
/** Indicates that user input is required on the element before a form may be submitted. */
"aria-required"?: Booleanish | undefined;
/** Defines a human-readable, author-localized description for the role of an element. */
@@ -631,7 +633,7 @@ export interface HTMLAttributes extends AriaAttributes, DOMAttributes {
placeholder?: string | undefined;
slot?: string | undefined;
spellcheck?: Booleanish | undefined;
- style?: object | undefined;
+ style?: string | undefined;
tabindex?: number | string | undefined;
title?: string | undefined;
translate?: "yes" | "no" | undefined;
@@ -653,15 +655,15 @@ export interface HTMLAttributes extends AriaAttributes, DOMAttributes {
* @see https://html.spec.whatwg.org/multipage/interactiohtml#input-modalities:-the-inputmode-attribute
*/
inputmode?:
- | "none"
- | "text"
- | "tel"
- | "url"
- | "email"
- | "numeric"
- | "decimal"
- | "search"
- | undefined;
+ | "none"
+ | "text"
+ | "tel"
+ | "url"
+ | "email"
+ | "numeric"
+ | "decimal"
+ | "search"
+ | undefined;
/**
* Specify that a standard HTML element should behave like a defined custom built-in element
* @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
@@ -801,7 +803,7 @@ export interface AnchorHTMLAttributes extends HTMLAttributes {
path?: string | undefined;
}
-export interface AudioHTMLAttributes extends MediaHTMLAttributes {}
+export interface AudioHTMLAttributes extends MediaHTMLAttributes { }
export interface AreaHTMLAttributes extends HTMLAttributes {
alt?: string | undefined;
@@ -977,14 +979,14 @@ export interface InputHTMLAttributes extends HTMLAttributes {
checked?: boolean | undefined;
disabled?: boolean | undefined;
enterkeyhint?:
- | "enter"
- | "done"
- | "go"
- | "next"
- | "previous"
- | "search"
- | "send"
- | undefined;
+ | "enter"
+ | "done"
+ | "go"
+ | "next"
+ | "previous"
+ | "search"
+ | "send"
+ | undefined;
form?: string | undefined;
formaction?: string | undefined;
formenctype?: string | undefined;
@@ -1260,7 +1262,7 @@ export interface SVGAttributes extends AriaAttributes, DOMAttributes {
method?: string | undefined;
min?: number | string | undefined;
name?: string | undefined;
- style?: object | undefined;
+ style?: string | undefined;
target?: string | undefined;
type?: string | undefined;
width?: number | string | undefined;
@@ -1304,8 +1306,8 @@ declare global {
namespace JSX {
type Element = NullstackNode;
- interface IntrinsicAttributes extends NullstackAttributes {}
- interface IntrinsicClassAttributes extends ClassAttributes {}
+ interface IntrinsicAttributes extends NullstackAttributes { }
+ interface IntrinsicClassAttributes extends ClassAttributes { }
interface AllElements {
// HTML
@@ -1664,6 +1666,6 @@ declare global {
element: ElementTagHTMLAttributes;
}
- interface IntrinsicElements extends ExoticElements, AllElements {}
+ interface IntrinsicElements extends ExoticElements, AllElements { }
}
}
diff --git a/types/Self.d.ts b/types/Self.d.ts
deleted file mode 100644
index a6fe2510..00000000
--- a/types/Self.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type NullstackSelf = {
-
- initiated: boolean;
-
- hydrated: boolean;
-
- terminated: boolean;
-
- prerendered: boolean;
-
- /**
- * If the component is persistent
- *
- * @see https://nullstack.app/persistent-components
- */
- persistent: boolean,
-
- /**
- * Only available after hydration
- */
- element?: HTMLElement;
-
- key: string;
-
-};
\ No newline at end of file
diff --git a/types/index.d.ts b/types/index.d.ts
index b1081dbf..f490fa0b 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -4,7 +4,7 @@ import { NullstackServerContext } from "./ServerContext";
export interface NullstackContext
extends NullstackClientContext,
- NullstackServerContext {}
+ NullstackServerContext { }
export * from "./ClientContext";
export * from "./Environment";
@@ -14,7 +14,6 @@ export * from "./Plugin";
export * from "./Project";
export * from "./Router";
export * from "./Secrets";
-export * from "./Self";
export * from "./Server";
export * from "./ServerContext";
export * from "./Settings";
@@ -28,47 +27,64 @@ export default class Nullstack {
* @param App A Nullstack app root component
*/
static start?(App: any): NullstackContext;
-
+
/**
* Use a plugin
*/
static use?(Plugin: NullstackPlugin): void;
-
+
/**
* Could run on the server or client.
* @see https://nullstack.app/full-stack-lifecycle#prepare
*/
prepare?(context: NullstackContext & TProps): void;
-
+
/**
* Could run on the server or client.
* @see https://nullstack.app/full-stack-lifecycle#initiate
*/
initiate?(context: NullstackContext & TProps): void;
-
+
+ initiated: boolean;
+
/**
* Could run on the server or client.
* @see https://nullstack.app/full-stack-lifecycle#launch
*/
launch?(context: NullstackContext & TProps): void;
-
+
/**
* Runs on the client.
* @see https://nullstack.app/full-stack-lifecycle#hydrate
*/
hydrate?(context: NullstackClientContext & TProps): void;
-
+
+ hydrated: boolean;
+
/**
* Runs on the client.
* @see https://nullstack.app/full-stack-lifecycle#update
*/
update?(context: NullstackContext & TProps): void;
-
+
/**
* Runs on the client.
* @see https://nullstack.app/full-stack-lifecycle#terminate
*/
terminate?(context: NullstackContext & TProps): void;
+ terminated: boolean;
+
render?(context: NullstackContext & TProps): void;
+
+ prerendered: boolean;
+
+ /**
+ * If the component is persistent
+ *
+ * @see https://nullstack.app/persistent-components
+ */
+ persistent: boolean;
+
+ key: string;
}
diff --git a/webpack.config.js b/webpack.config.js
index 07980c30..51797d67 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,12 +1,19 @@
const path = require('path');
-const NodemonPlugin = require('nodemon-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const crypto = require("crypto");
const { readdirSync } = require('fs');
+const NodemonPlugin = require('nodemon-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
const buildKey = crypto.randomBytes(20).toString('hex');
+customConsole = new Proxy({}, {
+ get() {
+ return () => { }
+ }
+})
+
function getLoader(loader) {
const loaders = path.resolve('./node_modules/nullstack/loaders');
return path.join(loaders, loader);
@@ -115,17 +122,21 @@ function server(env, argv) {
const folder = isDev ? '.development' : '.production';
const devtool = isDev ? 'inline-cheap-module-source-map' : false;
const minimize = !isDev;
- const plugins = isDev ? ([
- new NodemonPlugin({
+ const plugins = []
+ if (isDev) {
+ plugins.push(new NodemonPlugin({
ext: '*',
- watch: [".env", ".env.*", './.development/*.*'],
+ watch: [".env", ".env.*", './.development/server.js'],
script: './.development/server.js',
nodeArgs: ['--enable-source-maps'],
quiet: true
- })
- ]) : [];
+ }))
+ }
return {
mode: argv.environment,
+ infrastructureLogging: {
+ console: customConsole,
+ },
entry: './server.js',
output: {
path: path.join(dir, folder),
@@ -211,6 +222,10 @@ function server(env, argv) {
test: /\.(njs|nts|jsx|tsx)$/,
loader: getLoader('register-inner-components.js'),
},
+ {
+ test: /\.(njs|nts|jsx|tsx)$/,
+ loader: getLoader('transform-node-ref.js'),
+ },
{
issuer: /worker.js/,
resourceQuery: /raw/,
@@ -229,27 +244,29 @@ function server(env, argv) {
}
function client(env, argv) {
+ const disk = !!argv.disk
const dir = argv.input ? path.join(__dirname, argv.input) : process.cwd();
const isDev = argv.environment === 'development';
const folder = isDev ? '.development' : '.production';
const devtool = isDev ? 'inline-cheap-module-source-map' : false;
const minimize = !isDev;
- let liveReload = {};
- if (!isDev) {
- liveReload = {
- test: /liveReload.js$/,
- use: [
- { loader: getLoader('ignore-import.js') }
- ]
- }
- }
const plugins = [
new MiniCssExtractPlugin({
filename: "client.css",
chunkFilename: '[chunkhash].client.css'
- })
+ }),
]
+ if (disk) {
+ plugins.push(new CopyPlugin({
+ patterns: [
+ { from: "public", to: "../.development" },
+ ]
+ }))
+ }
return {
+ infrastructureLogging: {
+ console: customConsole,
+ },
mode: argv.environment,
entry: './client.js',
output: {
@@ -273,6 +290,10 @@ function client(env, argv) {
stats: 'errors-only',
module: {
rules: [
+ {
+ test: /client.js$/,
+ loader: getLoader('inject-hmr.js'),
+ },
{
test: /nullstack.js$/,
loader: getLoader('string-replace.js'),
@@ -307,7 +328,6 @@ function client(env, argv) {
{ loader: require.resolve('sass-loader') }
],
},
- liveReload,
nullstackTypescript,
{
test: /\.(njs|nts|jsx|tsx)$/,
@@ -317,6 +337,10 @@ function client(env, argv) {
test: /\.(njs|nts|jsx|tsx)$/,
loader: getLoader('register-inner-components.js'),
},
+ {
+ test: /\.(njs|nts|jsx|tsx)$/,
+ loader: getLoader('transform-node-ref.js'),
+ },
]
},
target: 'web',
-Feature-Driven Fullstack JavaScript Components
+Feature-Driven Full Stack JavaScript Components
## What is Nullstack?
-Nullstack is a Feature-Driven fullstack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production.
+Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production.
Write the backend and frontend of a feature in a single component and let the framework decide where the code should run.
diff --git a/client/anchorableNode.js b/client/anchorableNode.js
index bee172e6..7c4d06a7 100644
--- a/client/anchorableNode.js
+++ b/client/anchorableNode.js
@@ -3,8 +3,6 @@ import router from './router'
export function anchorableElement(element) {
const links = element.querySelectorAll('a[href^="/"]:not([target])')
for (const link of links) {
- if (link.dataset.nullstack) return
- link.dataset.nullstack = true
link.addEventListener('click', (event) => {
if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
event.preventDefault()
diff --git a/client/client.js b/client/client.js
index 798dfce9..15f0a670 100644
--- a/client/client.js
+++ b/client/client.js
@@ -7,7 +7,6 @@ import router from './router'
const client = {}
client.initialized = false
-client.hydrated = false
client.initializer = null
client.instances = {}
context.instances = client.instances
@@ -20,6 +19,12 @@ client.selector = null
client.events = {}
client.generateContext = generateContext
client.renderQueue = null
+client.currentBody = {}
+client.nextBody = {}
+client.currentHead = []
+client.nextHead = []
+client.head = document.head
+client.body = document.body
client.update = async function update() {
if (client.initialized) {
@@ -30,11 +35,14 @@ client.update = async function update() {
scope.plugins = loadPlugins(scope)
client.initialized = false
client.renewalQueue = []
- client.nextVirtualDom = await generateTree(client.initializer(), scope)
- rerender(client.selector)
- client.virtualDom = client.nextVirtualDom
- client.nextVirtualDom = null
- client.processLifecycleQueues()
+ try {
+ client.nextVirtualDom = await generateTree(client.initializer(), scope)
+ rerender()
+ client.processLifecycleQueues()
+ } catch (e) {
+ client.skipHotReplacement = true
+ console.error(e)
+ }
}, 16)
}
}
@@ -42,15 +50,22 @@ client.update = async function update() {
client.processLifecycleQueues = async function processLifecycleQueues() {
if (!client.initialized) {
client.initialized = true
- client.hydrated = true
}
let shouldUpdate = false
+ let shouldScroll = router._hash
while (client.initiationQueue.length) {
const instance = client.initiationQueue.shift()
instance.initiate && await instance.initiate()
- instance._self.initiated = true
+ instance.initiated = true
instance.launch && instance.launch()
shouldUpdate = true
+ if (instance._attributes.route && shouldScroll) {
+ const element = document.getElementById(router._hash)
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth' })
+ }
+ shouldScroll = false
+ }
}
shouldUpdate && client.update()
shouldUpdate = false
@@ -58,7 +73,7 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
shouldUpdate = true
const instance = client.realHydrationQueue.shift()
instance.hydrate && await instance.hydrate()
- instance._self.hydrated = true
+ instance.hydrated = true
}
shouldUpdate && client.update()
shouldUpdate = false
@@ -70,10 +85,10 @@ client.processLifecycleQueues = async function processLifecycleQueues() {
shouldUpdate && client.update()
for (const key in client.instances) {
const instance = client.instances[key]
- if (!client.renewalQueue.includes(instance) && !instance._self.terminated) {
+ if (!client.renewalQueue.includes(instance) && !instance.terminated) {
instance.terminate && await instance.terminate()
- if (instance._self.persistent) {
- instance._self.terminated = true
+ if (instance.persistent) {
+ instance.terminated = true
} else {
delete client.instances[key]
}
diff --git a/client/environment.js b/client/environment.js
index d4c42e7f..246ce1f6 100644
--- a/client/environment.js
+++ b/client/environment.js
@@ -1,6 +1,10 @@
import state from './state';
-const environment = { ...state.environment, client: true, server: false };
-Object.freeze(environment);
+const environment = {
+ ...state.environment,
+ client: true,
+ server: false,
+ event: 'nullstack.environment'
+};
export default environment;
\ No newline at end of file
diff --git a/client/events.js b/client/events.js
new file mode 100644
index 00000000..7ac83483
--- /dev/null
+++ b/client/events.js
@@ -0,0 +1,72 @@
+import router from './router'
+import { camelize } from '../shared/string';
+import noop from '../shared/noop'
+
+export const eventCallbacks = new WeakMap()
+export const eventSubjects = new WeakMap()
+export const eventDebouncer = new WeakMap()
+
+function executeEvent(callback, subject, event, data) {
+ if (typeof callback === 'object') {
+ Object.assign(subject.source, callback);
+ } else {
+ callback({ ...subject, event, data });
+ }
+}
+
+function debounce(selector, name, time, callback) {
+ if (!time) {
+ callback()
+ } else {
+ const eventMap = eventDebouncer.get(selector) || {}
+ clearTimeout(eventMap[name])
+ eventMap[name] = setTimeout(callback, time)
+ eventDebouncer.set(selector, eventMap)
+ }
+}
+
+export function generateCallback(selector, name) {
+ return function eventCallback(event) {
+ const subject = eventSubjects.get(selector)
+ if (!subject) return
+ if (subject.href) {
+ if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+ event.preventDefault()
+ router.url = subject.href
+ }
+ } else if (subject.default !== true) {
+ event.preventDefault();
+ }
+ debounce(selector, name, subject.debounce, () => {
+ const data = { ...subject.data }
+ for (const attribute in subject) {
+ if (attribute.startsWith('data-')) {
+ const key = camelize(attribute.slice(5));
+ data[key] = subject[attribute];
+ }
+ }
+ if (subject?.bind !== undefined) {
+ const valueName = (subject.type === 'checkbox' || subject.type === 'radio') ? 'checked' : 'value'
+ const object = subject.bind.object
+ const property = subject.bind.property
+ if (valueName === 'checked') {
+ object[property] = event.target[valueName];
+ } else if (object[property] === true || object[property] === false) {
+ object[property] = event.target[valueName] === 'true';
+ } else if (typeof object[property] === 'number') {
+ object[property] = +event.target[valueName] || 0;
+ } else {
+ object[property] = event.target[valueName];
+ }
+ }
+ if (subject[name] === noop) return
+ if (Array.isArray(subject[name])) {
+ for (const subcallback of subject[name]) {
+ executeEvent(subcallback, subject, event, data)
+ }
+ } else {
+ executeEvent(subject[name], subject, event, data)
+ }
+ })
+ }
+};
\ No newline at end of file
diff --git a/client/hydrate.js b/client/hydrate.js
new file mode 100644
index 00000000..e07821ac
--- /dev/null
+++ b/client/hydrate.js
@@ -0,0 +1,50 @@
+import { ref } from './ref';
+import { isFalse } from '../shared/nodes';
+import { anchorableElement } from './anchorableNode';
+import client from './client';
+
+let pool = []
+
+function hydrateBody(selector, node) {
+ if (node?.attributes?.html) {
+ anchorableElement(selector);
+ }
+ node.element = selector
+ ref(node.attributes, selector)
+ for (const element of selector.childNodes) {
+ if ((element.tagName === 'TEXTAREA' || element.tagName === 'textarea') && element.childNodes.length === 0) {
+ element.appendChild(document.createTextNode(''));
+ } else if (element.COMMENT_NODE === 8 && element.textContent === '#') {
+ pool.push(element.remove())
+ }
+ }
+ if (!node.children) return
+ const limit = node.children.length;
+ for (let i = limit - 1; i > -1; i--) {
+ if (node.type !== 'head' && typeof selector?.childNodes?.[i] === 'undefined') {
+ console.error(
+ `${node.type.toUpperCase()} expected tag ${node.children[i].type.toUpperCase()} to be child at index ${i} but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.`,
+ selector
+ )
+ throw new Error('Virtual DOM does not match the DOM.')
+ }
+ hydrateBody(selector.childNodes[i], node.children[i])
+ }
+}
+
+function hydrateHead() {
+ for (const node of client.nextHead) {
+ if (isFalse(node)) {
+ node.element = pool.pop() || document.createComment("")
+ client.head.append(node.element)
+ } else {
+ node.element = document.getElementById(node.attributes.id)
+ }
+ }
+ pool = null
+}
+
+export default function hydrate(selector, node) {
+ hydrateBody(selector, node)
+ hydrateHead()
+}
\ No newline at end of file
diff --git a/client/index.js b/client/index.js
index 2777dd63..887bd72c 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,22 +2,23 @@ import state from './state'
import element from '../shared/element';
import fragment from '../shared/fragment';
import generateTree from '../shared/generateTree';
-import getProxyableMethods from '../shared/getProxyableMethods';
-import { loadPlugins, usePlugins } from '../shared/plugins';
+import { loadPlugins, useClientPlugins } from '../shared/plugins';
import client from './client';
import context, { generateContext } from './context';
import environment from './environment';
-import instanceProxyHandler from './instanceProxyHandler';
+import instanceProxyHandler, { instanceProxies } from './instanceProxyHandler';
import invoke from './invoke';
-import './liveReload';
import page from './page';
import params, { updateParams } from './params';
import project from './project';
import render from './render';
import rerender from './rerender';
+import hydrate from './hydrate';
import router from './router';
import settings from './settings';
import worker from './worker';
+import klassMap from './klassMap';
+import windowEvent from './windowEvent'
context.page = page;
context.router = router;
@@ -40,18 +41,25 @@ export default class Nullstack {
static element = element;
static invoke = invoke;
static fragment = fragment;
- static use = usePlugins('client');
+ static use = useClientPlugins;
+ static klassMap = {}
+ static context = generateContext({})
static start(Starter) {
setTimeout(async () => {
window.addEventListener('popstate', () => {
router._popState();
});
+ if (client.initializer) {
+ client.initializer = () => element(Starter);
+ client.update()
+ return this.context
+ }
client.routes = {};
updateParams(router.url);
client.currentInstance = null;
client.initializer = () => element(Starter);
- client.selector = document.querySelector('#application');
+ client.selector = document.getElementById('application');
if (environment.mode === 'spa') {
scope.plugins = loadPlugins(scope);
worker.online = navigator.onLine;
@@ -63,34 +71,33 @@ export default class Nullstack {
client.selector = body
} else {
client.virtualDom = await generateTree(client.initializer(), scope);
+ hydrate(client.selector, client.virtualDom)
+ client.currentBody = client.nextBody
+ client.currentHead = client.nextHead
+ client.nextBody = {}
+ client.nextHead = []
context.environment = environment;
scope.plugins = loadPlugins(scope);
worker.online = navigator.onLine;
typeof context.start === 'function' && await context.start(context);
client.nextVirtualDom = await generateTree(client.initializer(), scope);
- rerender(client.selector);
- client.virtualDom = client.nextVirtualDom;
- client.nextVirtualDom = null;
+ rerender();
}
client.processLifecycleQueues();
delete state.context;
}, 0)
- return generateContext({});
+ return this.context;
}
- _self = {
- prerendered: false,
- initiated: false,
- hydrated: false,
- terminated: false,
- }
+ prerendered = false
+ initiated = false
+ hydrated = false
+ terminated = false
+ key = null
constructor() {
- const methods = getProxyableMethods(this);
const proxy = new Proxy(this, instanceProxyHandler);
- for (const method of methods) {
- this[method] = this[method].bind(proxy);
- }
+ instanceProxies.set(this, proxy)
return proxy;
}
@@ -98,4 +105,40 @@ export default class Nullstack {
return false;
}
+}
+
+if (module.hot) {
+ const socket = new WebSocket('ws' + router.base.slice(4) + '/ws');
+ window.lastHash
+ socket.onmessage = async function (e) {
+ const data = JSON.parse(e.data)
+ if (data.type === 'NULLSTACK_SERVER_STARTED') {
+ (window.needsReload || !environment.hot) && window.location.reload()
+ } else if (data.type === 'hash') {
+ const newHash = data.data.slice(20)
+ if (newHash === window.lastHash) {
+ window.needsReload = true
+ } else {
+ window.lastHash = newHash
+ }
+ }
+ };
+ Nullstack.updateInstancesPrototypes = function updateInstancesPrototypes(hash, klass) {
+ for (const key in context.instances) {
+ const instance = context.instances[key]
+ if (instance.constructor.hash === hash) {
+ Object.setPrototypeOf(instance, klass.prototype);
+ }
+ }
+ klassMap[hash] = klass
+ }
+ Nullstack.hotReload = function hotReload(klass) {
+ if (client.skipHotReplacement) {
+ window.location.reload()
+ } else {
+ Nullstack.start(klass);
+ windowEvent('environment');
+ }
+ }
+ module.hot.decline()
}
\ No newline at end of file
diff --git a/client/instanceProxyHandler.js b/client/instanceProxyHandler.js
index 9e79ca11..fdf83cbd 100644
--- a/client/instanceProxyHandler.js
+++ b/client/instanceProxyHandler.js
@@ -2,15 +2,21 @@ import client from './client';
import { generateContext } from './context';
import { generateObjectProxy } from './objectProxyHandler';
+export const instanceProxies = new WeakMap()
+
const instanceProxyHandler = {
get(target, name) {
if (name === '_isProxy') return true;
if (target.constructor[name]?.name === '_invoke') return target.constructor[name].bind(target.constructor)
- if (!target[name]?.name?.startsWith('_') && !name.startsWith('_') && typeof (target[name]) == 'function' && name !== 'constructor') {
+ if (typeof target[name] === 'function' && name !== 'constructor') {
+ const proxy = instanceProxies.get(target)
+ if (name.startsWith('_')) {
+ return target[name].bind(proxy)
+ }
const { [name]: named } = {
[name]: (args) => {
- const context = generateContext({ ...target._attributes, ...args, self: target._self });
- return target[name](context);
+ const context = generateContext({ ...target._attributes, ...args });
+ return target[name].call(proxy, context);
}
}
return named;
@@ -18,7 +24,7 @@ const instanceProxyHandler = {
return Reflect.get(...arguments);
},
set(target, name, value) {
- if (!value?.name?.startsWith('_') && !name.startsWith('_')) {
+ if (!name.startsWith('_')) {
target[name] = generateObjectProxy(name, value);
client.update();
} else {
diff --git a/client/klassMap.js b/client/klassMap.js
new file mode 100644
index 00000000..064689cb
--- /dev/null
+++ b/client/klassMap.js
@@ -0,0 +1,3 @@
+const klassMap = {}
+
+export default klassMap
\ No newline at end of file
diff --git a/client/liveReload.js b/client/liveReload.js
deleted file mode 100644
index e135a143..00000000
--- a/client/liveReload.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import worker from './worker'
-
-let shouldReloadNext = false;
-let timer = null;
-
-function reload() {
- if (shouldReloadNext) {
- clearInterval(timer);
- timer = setTimeout(() => {
- location.reload();
- }, 10)
- } else {
- shouldReloadNext = true;
- }
-}
-
-function liveReload() {
- const url = worker.api ? `${worker.api.replace('http', 'ws')}` : `${location.protocol.replace('http', 'ws')}//${location.host}`
- const socket = new WebSocket(url);
- socket.addEventListener('open', reload);
- socket.addEventListener('close', liveReload);
-}
-
-liveReload();
\ No newline at end of file
diff --git a/client/objectProxyHandler.js b/client/objectProxyHandler.js
index 8028e88d..0c544440 100644
--- a/client/objectProxyHandler.js
+++ b/client/objectProxyHandler.js
@@ -2,37 +2,34 @@ import client from './client';
const objectProxyHandler = {
set(target, name, value) {
- if(isProxyable(name, value)) {
- value._isProxy = true;
+ if (isProxyable(name, value)) {
target[name] = new Proxy(value, this);
} else {
target[name] = value;
}
- if(!name.startsWith('_')) {
+ if (!name.startsWith('_')) {
client.update();
}
return true;
},
get(target, name) {
- if(name === '_isProxy') return true;
+ if (name === '_isProxy') return true;
return Reflect.get(...arguments);
}
}
function isProxyable(name, value) {
- return (
- !name.startsWith('_') &&
- value !== null &&
- typeof(value) === 'object' &&
- value._isProxy === undefined &&
- !(value instanceof Date)
- );
+ if (name.startsWith('_')) return false
+ const constructor = value?.constructor
+ if (!constructor) return false
+ if (value._isProxy) return false
+ return constructor === Array || constructor === Object
}
export function generateObjectProxy(name, value) {
- if(isProxyable(name, value)) {
- if(typeof(value) === 'object') {
- for(const key of Object.keys(value)) {
+ if (isProxyable(name, value)) {
+ if (typeof (value) === 'object') {
+ for (const key of Object.keys(value)) {
value[key] = generateObjectProxy(key, value[key]);
}
}
diff --git a/client/ref.js b/client/ref.js
new file mode 100644
index 00000000..5cb9775f
--- /dev/null
+++ b/client/ref.js
@@ -0,0 +1,27 @@
+const refMap = new WeakMap()
+
+function setup(attributes, element) {
+ const object = attributes.ref.object
+ const property = attributes.ref.property
+ if (typeof object[property] === 'function') {
+ setTimeout(() => {
+ object[property]({ ...attributes, element })
+ }, 0)
+ } else {
+ object[property] = element
+ }
+ const map = refMap.get(attributes.ref.object) || {}
+ map[attributes.ref.property] = true
+ refMap.set(attributes.ref.object, map)
+}
+
+export function ref(attributes, element) {
+ if (!attributes?.ref) return
+ setup(attributes, element)
+}
+
+export function reref(attributes, element) {
+ const map = refMap.get(attributes.ref.object)
+ if (map?.[attributes.ref.property]) return
+ setup(attributes, element)
+}
\ No newline at end of file
diff --git a/client/render.js b/client/render.js
index 5b1eaf60..6ca7e134 100644
--- a/client/render.js
+++ b/client/render.js
@@ -1,52 +1,57 @@
import { isFalse, isText } from '../shared/nodes';
import { anchorableElement } from './anchorableNode';
+import { eventCallbacks, eventSubjects, generateCallback } from './events'
+import { ref } from './ref'
+import generateTruthyString from '../shared/generateTruthyString';
export default function render(node, options) {
if (isFalse(node) || node.type === 'head') {
- return document.createComment("");
+ node.element = document.createComment("");
+ return node.element
}
if (isText(node)) {
- return document.createTextNode(node);
+ node.element = document.createTextNode(node.text);
+ return node.element
}
const svg = (options && options.svg) || node.type === 'svg';
- let element;
if (svg) {
- element = document.createElementNS("http://www.w3.org/2000/svg", node.type);
+ node.element = document.createElementNS("http://www.w3.org/2000/svg", node.type);
} else {
- element = document.createElement(node.type);
+ node.element = document.createElement(node.type);
}
- if (node.instance) {
- node.instance._self.element = element;
- }
+ ref(node.attributes, node.element)
for (let name in node.attributes) {
+ if (name === 'debounce') continue
if (name === 'html') {
- element.innerHTML = node.attributes[name];
- anchorableElement(element);
+ node.element.innerHTML = node.attributes[name];
+ node.head || anchorableElement(node.element);
} else if (name.startsWith('on')) {
if (node.attributes[name] !== undefined) {
- const eventName = name.replace('on', '');
- const key = '_event.' + eventName;
- node[key] = (event) => {
- if (node.attributes.default !== true) {
- event.preventDefault();
- }
- node.attributes[name]({ ...node.attributes, event });
- };
- element.addEventListener(eventName, node[key]);
+ const eventName = name.substring(2);
+ const callback = generateCallback(node.element, name)
+ node.element.addEventListener(eventName, callback);
+ eventCallbacks.set(node.element, callback)
+ eventSubjects.set(node.element, node.attributes)
}
} else {
- const type = typeof (node.attributes[name]);
+ let nodeValue;
+ if ((name === 'class' || name === 'style') && Array.isArray(node.attributes[name])) {
+ nodeValue = generateTruthyString(node.attributes[name])
+ } else {
+ nodeValue = node.attributes[name]
+ }
+ const type = typeof nodeValue;
if (type !== 'object' && type !== 'function') {
- if (name != 'value' && node.attributes[name] === true) {
- element.setAttribute(name, '');
- } else if (name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
- element.setAttribute(name, node.attributes[name]);
+ if (name != 'value' && nodeValue === true) {
+ node.element.setAttribute(name, '');
+ } else if (name === 'value' || (nodeValue !== false && nodeValue !== null && nodeValue !== undefined)) {
+ node.element.setAttribute(name, nodeValue);
}
}
}
@@ -55,14 +60,14 @@ export default function render(node, options) {
if (!node.attributes.html) {
for (let i = 0; i < node.children.length; i++) {
const child = render(node.children[i], { svg });
- element.appendChild(child);
+ node.element.appendChild(child);
}
- if (node.type == 'select') {
- element.value = node.attributes.value;
+ if (node.type === 'select') {
+ node.element.value = node.attributes.value;
}
}
- return element;
+ return node.element;
}
\ No newline at end of file
diff --git a/client/rerender.js b/client/rerender.js
index 769ffc7c..f67a285b 100644
--- a/client/rerender.js
+++ b/client/rerender.js
@@ -1,112 +1,126 @@
-import { isFalse, isText } from '../shared/nodes';
+import { isUndefined, isFalse, isText } from '../shared/nodes';
import { anchorableElement } from './anchorableNode';
import client from './client';
import render from './render';
-
-export default function rerender(selector, current, next) {
-
- current = current === undefined ? client.virtualDom : current;
- next = next === undefined ? client.nextVirtualDom : next;
-
- if (next.instance) {
- next.instance._self.element = selector;
- }
-
- if (!client.hydrated && selector) {
- for (const element of selector.childNodes) {
- if (element.tagName && element.tagName.toLowerCase() == 'textarea' && element.childNodes.length == 0) {
- element.appendChild(document.createTextNode(''));
+import { generateCallback, eventCallbacks, eventSubjects } from './events'
+import generateTruthyString from '../shared/generateTruthyString';
+import { reref } from './ref';
+
+function updateAttributes(selector, currentAttributes, nextAttributes) {
+ const attributeNames = Object.keys({ ...currentAttributes, ...nextAttributes });
+ for (const name of attributeNames) {
+ if (name === 'debounce') continue
+ if (name === 'ref' && nextAttributes?.ref?.property) {
+ reref(nextAttributes, selector)
+ } else if (name === 'html') {
+ if (nextAttributes[name] !== currentAttributes[name]) {
+ selector.innerHTML = nextAttributes[name];
+ anchorableElement(selector);
+ }
+ } else if (name === 'checked' || name === 'value') {
+ if (nextAttributes[name] !== currentAttributes[name] && nextAttributes[name] !== selector[name]) {
+ selector[name] = nextAttributes[name];
}
- if (element.COMMENT_NODE === 8 && element.textContent === '#') {
- selector.removeChild(element);
+ } else if (name.startsWith('on')) {
+ const eventName = name.substring(2);
+ if (eventCallbacks.has(selector) && !nextAttributes[name]) {
+ selector.removeEventListener(eventName, eventCallbacks.get(selector));
+ }
+ if (nextAttributes[name]) {
+ if (!eventCallbacks.has(selector)) {
+ const callback = generateCallback(selector, name)
+ selector.addEventListener(eventName, callback);
+ eventCallbacks.set(selector, callback)
+ }
+ eventSubjects.set(selector, nextAttributes)
+ }
+ } else {
+ let currentValue;
+ if ((name === 'class' || name === 'style') && Array.isArray(currentAttributes[name])) {
+ currentValue = generateTruthyString(currentAttributes[name])
+ } else {
+ currentValue = currentAttributes[name]
+ }
+ let nextValue;
+ if ((name === 'class' || name === 'style') && Array.isArray(nextAttributes[name])) {
+ nextValue = generateTruthyString(nextAttributes[name])
+ } else {
+ nextValue = nextAttributes[name]
+ }
+ const type = typeof nextValue;
+ if (type !== 'object' && type !== 'function') {
+ if (currentValue !== undefined && nextValue === undefined) {
+ selector.removeAttribute(name);
+ } else if (currentValue !== nextValue) {
+ if (name != 'value' && nextValue === false || nextValue === null || nextValue === undefined) {
+ selector.removeAttribute(name);
+ } else if (name != 'value' && nextValue === true) {
+ selector.setAttribute(name, '');
+ } else {
+ selector.setAttribute(name, nextValue);
+ }
+ }
}
}
}
+}
+function updateHeadChild(current, next) {
+ if (isUndefined(current) && !isUndefined(next)) {
+ const nextSelector = render(next);
+ client.head.append(nextSelector)
+ return
+ }
+ if (!isUndefined(current) && isUndefined(next)) {
+ current.element.remove()
+ return
+ }
+ next.element = current.element
if (isFalse(current) && isFalse(next)) {
- return;
+ return
}
-
- if ((isFalse(current) || isFalse(next)) && current != next) {
+ if (current.type !== next.type) {
const nextSelector = render(next);
- return selector.replaceWith(nextSelector);
+ current.element.replaceWith(nextSelector)
+ return
}
+ updateAttributes(current.element, current.attributes, next.attributes)
+}
- if (current.type == 'head' && next.type == 'head') {
- return;
+function updateHeadChildren(currentChildren, nextChildren) {
+ const limit = Math.max(currentChildren.length, nextChildren.length);
+ for (let i = 0; i < limit; i++) {
+ updateHeadChild(currentChildren[i], nextChildren[i])
}
+}
- if (current.type == 'head' || next.type == 'head') {
- const nextSelector = render(next);
- return selector.replaceWith(nextSelector);
+function _rerender(current, next) {
+
+ const selector = current.element
+ next.element = current.element
+
+ if (isFalse(current) && isFalse(next)) {
+ return;
}
if (current.type !== next.type) {
const nextSelector = render(next);
- return selector.replaceWith(nextSelector);
+ selector.replaceWith(nextSelector);
+ return
}
if (isText(current) && isText(next)) {
- if (current != next) {
- selector.nodeValue = next;
+ if (current.text !== next.text) {
+ selector.textContent = next.text;
}
return;
}
- if (current.type === next.type) {
-
- const attributeNames = Object.keys({ ...current.attributes, ...next.attributes });
- for (const name of attributeNames) {
- if (name === 'html') {
- if (next.attributes[name] !== current.attributes[name]) {
- selector.innerHTML = next.attributes[name];
- }
- anchorableElement(selector);
- } else if (name === 'checked') {
- if (next.attributes[name] !== selector.value) {
- selector.checked = next.attributes[name];
- }
- } else if (name === 'value') {
- if (next.attributes[name] !== selector.value) {
- selector.value = next.attributes[name];
- }
- } else if (name.startsWith('on')) {
- const eventName = name.replace('on', '');
- const key = '_event.' + eventName;
- selector.removeEventListener(eventName, current[key]);
- if (next.attributes[name]) {
- next[key] = (event) => {
- if (next.attributes.default !== true) {
- event.preventDefault();
- }
- next.attributes[name]({ ...next.attributes, event });
- };
- selector.addEventListener(eventName, next[key]);
- }
- } else {
- const type = typeof (next.attributes[name]);
- if (type !== 'object' && type !== 'function') {
- if (current.attributes[name] !== undefined && next.attributes[name] === undefined) {
- selector.removeAttribute(name);
- } else if (current.attributes[name] !== next.attributes[name]) {
- if (name != 'value' && next.attributes[name] === false || next.attributes[name] === null || next.attributes[name] === undefined) {
- selector.removeAttribute(name);
- } else if (name != 'value' && next.attributes[name] === true) {
- selector.setAttribute(name, '');
- } else {
- selector.setAttribute(name, next.attributes[name]);
- }
- }
- }
- }
- }
-
- if (next.attributes.html) return;
-
+ if (!next.attributes.html) {
const limit = Math.max(current.children.length, next.children.length);
if (next.children.length > current.children.length) {
for (let i = 0; i < current.children.length; i++) {
- rerender(selector.childNodes[i], current.children[i], next.children[i]);
+ _rerender(current.children[i], next.children[i]);
}
for (let i = current.children.length; i < next.children.length; i++) {
const nextSelector = render(next.children[i]);
@@ -114,33 +128,30 @@ export default function rerender(selector, current, next) {
}
} else if (current.children.length > next.children.length) {
for (let i = 0; i < next.children.length; i++) {
- rerender(selector.childNodes[i], current.children[i], next.children[i]);
+ _rerender(current.children[i], next.children[i]);
}
for (let i = current.children.length - 1; i >= next.children.length; i--) {
- selector.removeChild(selector.childNodes[i]);
+ selector.childNodes[i].remove()
}
} else {
for (let i = limit - 1; i > -1; i--) {
- if (typeof selector.childNodes[i] === 'undefined') {
- console.error(
- `${current.type.toUpperCase()} expected tag ${current.children[i].type.toUpperCase()} to be child at index ${i} but instead found undefined. This error usually happens because of an invalid HTML hierarchy or changes in comparisons after serialization.`,
- selector
- )
- throw new Error('Virtual DOM does not match the DOM.')
- return;
- }
- rerender(selector.childNodes[i], current.children[i], next.children[i]);
+ _rerender(current.children[i], next.children[i]);
}
}
-
- if (next.type == 'textarea') {
- selector.value = next.children.join("");
- }
-
- if (next.type == 'select') {
- selector.value = next.attributes.value;
- }
-
}
-}
\ No newline at end of file
+ updateAttributes(selector, current.attributes, next.attributes)
+
+}
+
+export default function rerender() {
+ _rerender(client.virtualDom, client.nextVirtualDom)
+ updateAttributes(client.body, client.currentBody, client.nextBody)
+ updateHeadChildren(client.currentHead, client.nextHead)
+ client.virtualDom = client.nextVirtualDom
+ client.nextVirtualDom = null
+ client.currentBody = client.nextBody
+ client.nextBody = {}
+ client.currentHead = client.nextHead
+ client.nextHead = []
+}
diff --git a/client/router.js b/client/router.js
index 5b666376..28e2415d 100644
--- a/client/router.js
+++ b/client/router.js
@@ -28,8 +28,9 @@ class Router {
}
async _update(target, push) {
- this.previous = this.url;
const { url, path, hash, urlWithHash } = extractLocation(target);
+ if (url === this._url && this._hash === hash) return
+ this.previous = this.url;
clearTimeout(redirectTimer);
redirectTimer = setTimeout(async () => {
page.status = 200;
@@ -63,16 +64,12 @@ class Router {
}
async _redirect(target) {
- if (target.startsWith('http')) {
- return (window.location.href = target);
- }
- const { url, hash, urlWithHash } = extractLocation(target);
- if (url !== this._url || this._hash !== hash) {
- await this._update(urlWithHash, true);
- }
- if (!hash) {
- window.scroll(0, 0);
+ if (/^(\w+:|\/\/)([^.]+.)/.test(target)) {
+ return window.location.href = target;
}
+ const absoluteUrl = new URL(target, document.baseURI);
+ await this._update(absoluteUrl.pathname + absoluteUrl.search + absoluteUrl.hash, true);
+ window.scroll(0, 0)
}
get url() {
@@ -91,6 +88,12 @@ class Router {
this._redirect(target + window.location.search);
}
+ get base() {
+ if (this._base) return this._base
+ this._base = new URL(document.querySelector('[rel="canonical"]').href).origin
+ return this._base
+ }
+
}
const router = new Router();
diff --git a/loaders/add-source-to-node.js b/loaders/add-source-to-node.js
index 8a4ebd67..48d89ce5 100644
--- a/loaders/add-source-to-node.js
+++ b/loaders/add-source-to-node.js
@@ -1,36 +1,10 @@
-module.exports = function(source) {
- let match;
+module.exports = function (source) {
let tags = source.split('<');
- source = tags.map((tag) => {
- match = tag.match(/bind\=\{(.*?)\}/);
- if(match && tag.indexOf('source={') == -1) {
- let [a, b] = match[1].split(/\.(?=[^\.]+$)/);
- if(!b) {
- b = a;
- a = '';
- }
- if(b.indexOf('[') > -1) {
- const [ref, index] = b.split('[');
- if(a) {
- a = [a, ref].join('.');
- } else {
- a = ref;
- }
- b = '{' + index.replace(']', '}');
- } else {
- b = `"${b}"`;
- }
- return tag.replace(match[0], `source={${a}} bind=${b}`);
- }
- return tag;
- }).join('<');
- tags = source.split('<');
- source = tags.map((tag) => {
+ return tags.map((tag) => {
match = tag.match(/\ on([a-z]*?)\=\{(.*?)\}/);
- if(match && tag.indexOf('source={') == -1) {
+ if (match && tag.indexOf('source={') === -1) {
return tag.substring(0, match.index) + ' source={this}' + tag.substring(match.index);
}
return tag;
}).join('<');
- return source;
}
\ No newline at end of file
diff --git a/loaders/inject-hmr.js b/loaders/inject-hmr.js
new file mode 100644
index 00000000..8d325d03
--- /dev/null
+++ b/loaders/inject-hmr.js
@@ -0,0 +1,39 @@
+const parse = require('@babel/parser').parse;
+const traverse = require("@babel/traverse").default;
+
+module.exports = function (source) {
+ const ast = parse(source, {
+ sourceType: 'module',
+ plugins: ['classProperties', 'jsx']
+ });
+ let klassName
+ let klassPath
+ traverse(ast, {
+ MemberExpression(path) {
+ if (path.node.property.name === 'start' && path.node.object && path.node.object.name === 'Nullstack') {
+ klassName = path.parent.arguments[0].name
+ }
+ }
+ });
+ if (!klassName) return source
+ traverse(ast, {
+ ImportDeclaration(path) {
+ if (path.node.specifiers[0].local.name === klassName) {
+ klassPath = path.node.source.extra.rawValue
+ }
+ }
+ });
+
+ return source + `
+ if (module.hot) {
+ if (window.needsClientReload) {
+ window.location.reload()
+ }
+ module.hot.accept()
+ window.needsClientReload = true
+ module.hot.accept('${klassPath}', () => {
+ Nullstack.hotReload(${klassName})
+ })
+ }
+ `
+}
\ No newline at end of file
diff --git a/loaders/register-inner-components.js b/loaders/register-inner-components.js
index 7e893a3f..fa5f32c2 100644
--- a/loaders/register-inner-components.js
+++ b/loaders/register-inner-components.js
@@ -11,23 +11,25 @@ module.exports = function (source) {
traverse(ast, {
ClassMethod(path) {
if (path.node.key.name.startsWith('render')) {
- traverse(path.node, {
- JSXIdentifier(subpath) {
- if (/^[A-Z]/.test(subpath.node.name)) {
- if (!path.scope.hasBinding(subpath.node.name)) {
- const start = path.node.body.body[0].start;
- if (!positions.includes(start)) {
- positions.push(start);
- }
- if (!injections[start]) {
- injections[start] = [];
- }
- if (!injections[start].includes(subpath.node.name)) {
- injections[start].push(subpath.node.name);
- }
+ function identify(subpath) {
+ if (/^[A-Z]/.test(subpath.node.name)) {
+ if (!path.scope.hasBinding(subpath.node.name)) {
+ const start = path.node.body.body[0].start;
+ if (!positions.includes(start)) {
+ positions.push(start);
+ }
+ if (!injections[start]) {
+ injections[start] = [];
+ }
+ if (!injections[start].includes(subpath.node.name)) {
+ injections[start].push(subpath.node.name);
}
}
- },
+ }
+ }
+ traverse(path.node, {
+ JSXIdentifier: identify,
+ Identifier: identify,
}, path.scope, path);
}
}
diff --git a/loaders/register-static-from-server.js b/loaders/register-static-from-server.js
index d3d932dd..c299c3c5 100644
--- a/loaders/register-static-from-server.js
+++ b/loaders/register-static-from-server.js
@@ -28,9 +28,6 @@ module.exports = function (source) {
});
if (!hasClass) return source;
let output = source.substring(0, klassEnd);
- for (const methodName of methodNames) {
- output += `${methodName} = Nullstack.invoke('${methodName}');\n`
- }
output += source.substring(klassEnd);
for (const methodName of methodNames) {
output += `\nNullstack.registry["${hash}.${methodName}"] = ${klassName}.${methodName};`
@@ -38,5 +35,7 @@ module.exports = function (source) {
}
output += `\nNullstack.registry["${hash}"] = ${klassName};`
output += `\nNullstack.registry["${legacyHash}"] = ${klassName};`
+ output += `\n${klassName}.hash = "${hash}";`
+ output += `\n${klassName}.bindStaticFunctions(${klassName});`
return output;
}
\ No newline at end of file
diff --git a/loaders/remove-static-from-client.js b/loaders/remove-static-from-client.js
index 1aefa695..ea215e2c 100644
--- a/loaders/remove-static-from-client.js
+++ b/loaders/remove-static-from-client.js
@@ -6,6 +6,7 @@ module.exports = function removeStaticFromClient(source) {
const id = this.resourcePath.replace(this.rootContext, '')
const hash = crypto.createHash('md5').update(id).digest("hex");
let hashPosition;
+ let klassName;
const injections = {};
const positions = [];
const ast = parse(source, {
@@ -13,6 +14,9 @@ module.exports = function removeStaticFromClient(source) {
plugins: ['classProperties', 'jsx']
});
traverse(ast, {
+ ClassDeclaration(path) {
+ klassName = path.node.id.name;
+ },
ClassBody(path) {
const start = path.node.body[0].start;
hashPosition = start;
@@ -50,5 +54,9 @@ module.exports = function removeStaticFromClient(source) {
outputs.push(`static hash = '${hash}';\n\n `);
}
}
- return outputs.reverse().join('');
+ let newSource = outputs.reverse().join('')
+ if (klassName) {
+ newSource += `\nif (module.hot) { Nullstack.updateInstancesPrototypes(${klassName}.hash, ${klassName}) }`;
+ }
+ return newSource
}
\ No newline at end of file
diff --git a/loaders/transform-node-ref.js b/loaders/transform-node-ref.js
new file mode 100644
index 00000000..8be96e23
--- /dev/null
+++ b/loaders/transform-node-ref.js
@@ -0,0 +1,49 @@
+const parse = require('@babel/parser').parse;
+const traverse = require("@babel/traverse").default;
+
+const attributes = ['ref', 'bind']
+
+module.exports = function removeStaticFromClient(source) {
+ const ast = parse(source, {
+ sourceType: 'module',
+ plugins: ['classProperties', 'jsx', 'typescript']
+ });
+ const refs = []
+ traverse(ast, {
+ JSXAttribute(path) {
+ const attribute = path.node.name.name
+ if (attributes.includes(attribute)) {
+ const expression = path.node.value.expression
+ if (expression.type !== 'Identifier') {
+ const object = expression.object
+ const property = expression.property
+ const refObject = source.slice(object.start, object.end)
+ let refProperty = source.slice(property.start, property.end)
+ if (property.type === 'Identifier' && !expression.computed) {
+ refProperty = `'${refProperty}'`
+ }
+ replacement = `${attribute}={{object: ${refObject}, property: ${refProperty}}}`
+ refs.push({
+ start: path.node.start,
+ end: path.node.end,
+ replacement
+ })
+ }
+ }
+ }
+ });
+ if (refs.length === 0) return source
+ const sources = []
+ for (let i = 0; i <= refs.length; i++) {
+ const prev = refs[i - 1]
+ const current = refs[i]
+ const start = prev ? prev.end : 0
+ const end = current ? current.start : undefined
+ const before = source.slice(start, end)
+ sources.push(before)
+ if (current) {
+ sources.push(current.replacement)
+ }
+ }
+ return sources.join('')
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index f18654de..f1006209 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nullstack",
- "version": "0.15.10",
+ "version": "0.16.0",
"description": "Full-stack Javascript Components for one-dev armies",
"main": "nullstack.js",
"author": "Mortaro",
@@ -12,11 +12,12 @@
},
"types": "./types/index.d.ts",
"dependencies": {
- "@swc/core": "1.2.179",
"@babel/parser": "7.17.12",
"@babel/traverse": "7.17.12",
+ "@swc/core": "1.2.179",
"body-parser": "1.20.0",
"commander": "8.3.0",
+ "copy-webpack-plugin": "^11.0.0",
"cors": "2.8.5",
"css-loader": "6.7.1",
"dotenv": "8.6.0",
@@ -24,12 +25,13 @@
"fs-extra": "10.1.0",
"mini-css-extract-plugin": "2.6.0",
"node-fetch": "2.6.7",
- "nodemon-webpack-plugin": "4.7.1",
+ "nodemon-webpack-plugin": "^4.8.1",
"sass": "1.51.0",
"sass-loader": "8.0.2",
"swc-loader": "0.2.1",
"terser-webpack-plugin": "5.3.1",
"webpack": "5.72.1",
+ "webpack-dev-server": "4.9.0",
"ws": "7.5.7"
}
-}
\ No newline at end of file
+}
diff --git a/plugins/anchorable.js b/plugins/anchorable.js
index d3f92925..8769b4f9 100644
--- a/plugins/anchorable.js
+++ b/plugins/anchorable.js
@@ -1,3 +1,5 @@
+import noop from '../shared/noop'
+
function match(node) {
return (
node &&
@@ -8,21 +10,9 @@ function match(node) {
)
}
-function transform({ node, router }) {
+function transform({ node }) {
if (!match(node)) return
- const originalEvent = node.attributes.onclick
- node.attributes.default = true
- node.attributes.onclick = ({ event }) => {
- if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
- event.preventDefault()
- router.url = node.attributes.href
- }
- if (originalEvent) {
- setTimeout(() => {
- originalEvent({ ...node.attributes, event })
- }, 0)
- }
- }
+ node.attributes.onclick ??= noop
}
export default { transform, client: true }
diff --git a/plugins/bindable.js b/plugins/bindable.js
index 7d7174f2..e0dc0827 100644
--- a/plugins/bindable.js
+++ b/plugins/bindable.js
@@ -1,56 +1,30 @@
-function attachEvent(node) {
- const target = node.attributes.source;
- let eventName = 'oninput';
- let valueName = 'value';
- if (node.attributes.type === 'checkbox' || node.attributes.type === 'radio') {
- eventName = 'onclick';
- valueName = 'checked';
- } else if (node.type !== 'input' && node.type !== 'textarea') {
- eventName = 'onchange';
- }
- const originalEvent = node.attributes[eventName];
- node.attributes[eventName] = ({ event, value }) => {
- if (valueName == 'checked') {
- target[node.attributes.bind] = event.target[valueName];
- } else if (target[node.attributes.bind] === true || target[node.attributes.bind] === false) {
- target[node.attributes.bind] = event ? (event.target[valueName] == 'true') : value;
- } else if (typeof target[node.attributes.bind] === 'number') {
- target[node.attributes.bind] = parseFloat(event ? event.target[valueName] : value) || 0;
- } else {
- target[node.attributes.bind] = event ? event.target[valueName] : value;
- }
- if (originalEvent !== undefined) {
- setTimeout(() => {
- originalEvent({ ...node.attributes, event, value });
- }, 0);
- }
- }
-}
+import noop from '../shared/noop'
function match(node) {
- return (
- node !== undefined &&
- node.attributes !== undefined &&
- node.attributes.bind !== undefined &&
- node.attributes.source !== undefined
- )
+ return node?.attributes?.bind !== undefined
}
function transform({ node, environment }) {
if (!match(node)) return;
- const target = node.attributes.source;
+ const object = node.attributes.bind.object ?? {};
+ const property = node.attributes.bind.property;
if (node.type === 'textarea') {
- node.children = [target[node.attributes.bind]];
+ node.children = [object[property]];
} else if (node.type === 'input' && node.attributes.type === 'checkbox') {
- node.attributes.checked = target[node.attributes.bind];
+ node.attributes.checked = object[property];
} else {
- node.attributes.value = target[node.attributes.bind] || '';
+ node.attributes.value = object[property] ?? '';
}
node.attributes.name = node.attributes.name || node.attributes.bind;
-
if (environment.client) {
- attachEvent(node);
+ if (node.attributes.type === 'checkbox' || node.attributes.type === 'radio') {
+ node.attributes.onclick ??= noop;
+ } else if (node.type !== 'input' && node.type !== 'textarea') {
+ node.attributes.onchange ??= noop;
+ } else {
+ node.attributes.oninput ??= noop;
+ }
}
}
-export default { transform, client: true, server: true }
\ No newline at end of file
+export default { transform, client: true, server: true }
diff --git a/plugins/datable.js b/plugins/datable.js
deleted file mode 100644
index a4a78e61..00000000
--- a/plugins/datable.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import {camelize, kebabize} from '../shared/string';
-
-function match(node) {
- return (
- node &&
- node.attributes !== undefined
- )
-}
-
-function transform({node}) {
- if(!match(node)) return;
- node.attributes.data = node.attributes.data || {};
- for(const attribute in node.attributes) {
- if(attribute.startsWith('data-')) {
- const key = camelize(attribute.slice(5));
- node.attributes.data[key] = node.attributes[attribute];
- }
- }
- for(const key in node.attributes.data) {
- const attribute = 'data-' + kebabize(key);
- node.attributes[attribute] = node.attributes.data[key];
- }
-}
-
-export default { transform, client: true, server: true }
\ No newline at end of file
diff --git a/plugins/objectable.js b/plugins/objectable.js
deleted file mode 100644
index bc6265f2..00000000
--- a/plugins/objectable.js
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-function match(node) {
- return (
- node &&
- node.attributes !== undefined
- )
-}
-
-function transform({node}) {
- if(!match(node)) return;
- for(const attribute in node.attributes) {
- if(attribute.startsWith('on') && typeof(node.attributes[attribute]) === 'object') {
- const target = node.attributes.source;
- const object = node.attributes[attribute];
- node.attributes[attribute] = (function() {
- Object.assign(target, object);
- }).bind(target);
- }
- }
-}
-
-export default { transform, client: true }
\ No newline at end of file
diff --git a/plugins/routable.js b/plugins/routable.js
index 7f58a5cd..a8c20737 100644
--- a/plugins/routable.js
+++ b/plugins/routable.js
@@ -8,33 +8,25 @@ function erase(node) {
function match(node) {
return (
- node &&
+ node &&
node.attributes !== undefined &&
node.attributes.route !== undefined
)
}
-function load({router}) {
+function load({ router }) {
router._routes = {};
- if(!router._oldSegments) {
- router._oldSegments = {};
- router._newSegments = {};
- } else {
- router._oldSegments = router._newSegments;
- router._newSegments = {};
- }
}
-function transform({node, depth, router}) {
- if(!match(node)) return;
- const routeDepth = depth.slice(0, -1).join('.');
- if(router._routes[routeDepth] !== undefined) {
+function transform({ node, depth, router }) {
+ if (!match(node)) return;
+ const routeDepth = depth.slice(0, depth.lastIndexOf('-'))
+ if (router._routes[routeDepth] !== undefined) {
erase(node);
} else {
const params = routeMatches(router.url, node.attributes.route);
- if(params) {
+ if (params) {
router._routes[routeDepth] = true;
- router._newSegments[routeDepth] = params;
Object.assign(router._segments, params);
} else {
erase(node);
diff --git a/scripts/index.js b/scripts/index.js
index a5ee257f..34034d1f 100755
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -2,71 +2,148 @@
const { program } = require('commander');
const { version } = require('../package.json');
-let lastTrace = '';
-let compilingIndex = 1;
-
const webpack = require('webpack');
const path = require('path');
-const { existsSync } = require('fs');
+const { existsSync, rmdirSync, readdir, unlink } = require('fs');
const customConfig = path.resolve(process.cwd(), './webpack.config.js');
const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
+const dotenv = require('dotenv')
+const fetch = require('node-fetch')
-const buildModes = ['ssg', 'spa', 'ssr']
+function getConfig(options) {
+ return config.map((env) => env(null, options))
+}
function getCompiler(options) {
- const configs = config.map((env) => env(null, options))
- return webpack(configs)
+ return webpack(getConfig(options))
}
-function logCompiling(showCompiling) {
- if (!showCompiling) return;
- console.log(" βοΈ Compiling changes...");
+function loadEnv(env) {
+ let envPath = '.env'
+ if (env) {
+ envPath += `.${process.env.NULLSTACK_ENVIRONMENT_NAME}`
+ }
+ dotenv.config({ path: envPath })
}
-function logTrace(stats, showCompiling) {
- if (stats.hasErrors()) {
- const response = stats.toJson('errors-only', { colors: true })
- const error = response.errors[0] || response.children[0].errors[0];
- const { moduleName: file, message } = error
- const [loader, ...trace] = message.split('\n');
- if (loader.indexOf('/nullstack/loaders') === -1) trace.unshift(loader)
- const currentTrace = trace.join(' ');
- if (lastTrace === currentTrace) return;
- lastTrace = currentTrace;
- logCompiling(showCompiling);
- console.log(` π₯οΈ There is an error preventing compilation in \x1b[31m${file}\x1b[0m`);
- for (const line of trace) {
- console.log('\x1b[31m%s\x1b[0m', ' ' + line.trim());
+function getFreePorts() {
+ return new Promise((resolve, reject) => {
+ const app1 = require('express')();
+ const app2 = require('express')();
+ const server1 = app1.listen(0, () => {
+ const server2 = app2.listen(0, () => {
+ const ports = [
+ server1.address().port,
+ server2.address().port
+ ]
+ server1.close()
+ server2.close()
+ resolve(ports)
+ });
+ });
+ })
+}
+
+function getPort(port) {
+ return port || process.env['NULLSTACK_SERVER_PORT'] || process.env['PORT'] || 3000
+}
+
+function clearOutput(outputPath) {
+ if (!existsSync(outputPath)) return
+ readdir(outputPath, (err, files) => {
+ if (err) throw err;
+ for (const file of files) {
+ if (file === '.cache') continue;
+ unlink(path.join(outputPath, file), err => {
+ if (err) throw err;
+ });
}
- console.log();
- compilingIndex = 0;
- return
- }
- compilingIndex++;
- if (compilingIndex % 2 === 0) {
- logCompiling(showCompiling);
- compilingIndex = 0;
- }
- lastTrace = '';
+ });
}
-function start({ input, port, env, output, mode = 'ssr' }) {
- const environment = 'development';
- const compiler = getCompiler({ environment, input });
- if (port) {
- process.env['NULLSTACK_SERVER_PORT'] = port;
- }
- if (env) {
- process.env['NULLSTACK_ENVIRONMENT_NAME'] = env;
- }
+async function start({ input, port, env, mode = 'spa', cold, disk }) {
+ const environment = 'development'
console.log(` ποΈ Starting your application in ${environment} mode...`);
- console.log();
- compiler.watch({}, (error, stats) => {
- logTrace(stats, true)
- if (!stats.hasErrors() && mode !== 'ssr') {
- require(`../builders/${mode}`)({ output, environment });
- };
- });
+ loadEnv(env)
+ const WebpackDevServer = require('webpack-dev-server');
+ const { setLogLevel } = require('webpack/hot/log')
+ setLogLevel('none')
+ process.env['NULLSTACK_ENVIRONMENT_MODE'] = mode
+ process.env['NULLSTACK_SERVER_PORT'] = getPort(port)
+ const ports = await getFreePorts()
+ process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[0]
+ process.env['NULSTACK_SERVER_SOCKET_PORT_YOU_SHOULD_NOT_CARE_ABOUT'] = ports[1]
+ process.env['NULLSTACK_ENVIRONMENT_HOT'] = (!cold).toString()
+ process.env['NULLSTACK_ENVIRONMENT_DISK'] = (!!disk).toString()
+ if (!process.env['NULLSTACK_PROJECT_DOMAIN']) process.env['NULLSTACK_PROJECT_DOMAIN'] = 'localhost'
+ if (!process.env['NULLSTACK_WORKER_PROTOCOL']) process.env['NULLSTACK_WORKER_PROTOCOL'] = 'http'
+ const target = `${process.env['NULLSTACK_WORKER_PROTOCOL']}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULSTACK_SERVER_PORT_YOU_SHOULD_NOT_CARE_ABOUT']}`
+ const writeToDisk = disk ? true : (path) => path.includes('server')
+ const devServerOptions = {
+ hot: 'only',
+ open: false,
+ host: process.env['NULLSTACK_PROJECT_DOMAIN'],
+ devMiddleware: {
+ index: false,
+ stats: 'none',
+ writeToDisk,
+ },
+ client: {
+ overlay: { errors: true, warnings: false },
+ logging: 'none',
+ progress: false,
+ reconnect: true,
+ webSocketURL: `${process.env['NULLSTACK_WORKER_PROTOCOL'].replace('http', 'ws')}://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULLSTACK_SERVER_PORT']}/ws`
+ },
+ proxy: {
+ context: () => true,
+ target,
+ proxyTimeout: 10 * 60 * 1000,
+ timeout: 10 * 60 * 1000,
+ },
+ setupMiddlewares: (middlewares, devServer) => {
+ if (!devServer) {
+ throw new Error('webpack-dev-server is not defined');
+ }
+ middlewares.unshift(async (req, res, next) => {
+ if (req.originalUrl.indexOf('.hot-update.') === -1) {
+ if (req.originalUrl.startsWith('/nullstack/')) {
+ console.log(` βοΈ [${req.method}] ${req.originalUrl}`)
+ } else {
+ console.log(` πΈοΈ [${req.method}] ${req.originalUrl}`)
+ }
+ }
+ async function waitForServer() {
+ if (req.originalUrl.includes('.')) {
+ return next()
+ }
+ try {
+ await fetch(`${target}${req.originalUrl}`)
+ next()
+ } catch (error) {
+ if (error.message.includes('ECONNREFUSED')) {
+ setTimeout(waitForServer, 100)
+ } else {
+ throw error
+ }
+ }
+ }
+ waitForServer()
+ });
+ return middlewares;
+ },
+ webSocketServer: require.resolve('./socket'),
+ port: process.env['NULLSTACK_SERVER_PORT']
+ };
+ const compiler = getCompiler({ environment, input, disk });
+ clearOutput(compiler.compilers[0].outputPath)
+ const server = new WebpackDevServer(devServerOptions, compiler);
+ const portChecker = require('express')().listen(process.env['NULLSTACK_SERVER_PORT'], () => {
+ portChecker.close()
+ server.startCallback(() => {
+ console.log('\x1b[36m%s\x1b[0m', ` β
οΈ Your application is ready at http://${process.env['NULLSTACK_PROJECT_DOMAIN']}:${process.env['NULLSTACK_SERVER_PORT']}\n`);
+ });
+ })
}
function build({ input, output, cache, env, mode = 'ssr' }) {
@@ -77,7 +154,10 @@ function build({ input, output, cache, env, mode = 'ssr' }) {
}
console.log(` ποΈ Building your application in ${mode} mode...`);
compiler.run((error, stats) => {
- logTrace(stats, false);
+ if (stats.hasErrors()) {
+ console.log(stats.toString({ colors: true }))
+ process.exit(1);
+ }
if (stats.hasErrors()) process.exit(1);
require(`../builders/${mode}`)({ output, cache, environment });
});
@@ -87,11 +167,12 @@ program
.command('start')
.alias('s')
.description('Start application in development environment')
- .addOption(new program.Option('-m, --mode