```
```js
const some = js.code;
```
````
## Pull requests are always welcome
Not sure if that typo is worth a pull request? Found a bug and know how to fix it? Do it! We will appreciate it. Any significant improvement should be documented as [a GitHub issue](https://github.com/marko-js/marko/issues) before anybody starts working on it.
We are always thrilled to receive pull requests. We do our best to process them quickly. If your pull request is not accepted on the first try, don't get discouraged! We'll work with you to come to an acceptable solution.
Prior to merging your PR, you will need to sign the [Open JS Foundation CLA](https://easycla.lfx.linuxfoundation.org/). It's pretty straight-forward and only takes a minute. You'll also be prompted to sign the CLA automatically when opening a PR.
> **TIP:** If you're new to GitHub or open source you can check out this [free course](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) on how to contribute to an open source project.
### Running tests
Before submitting your PR, make sure that all new and previous tests pass and that [coverage](https://codecov.io/gh/marko-js/marko) has not decreased:
```
npm run @ci:test
# to view the coverage report
npm run report
```
While developing you can run a single test group and use [grep](https://mochajs.org/#-g---grep-pattern) to filter the tests:
```
npm test -- --grep=lifecycle
```
### Adding tests
Marko makes use of directory based test suites. Take a look at the `render` test suite:
The `html.test.js` file will run and read all the directories under `render/fixtures` and for each directory (`attrs`, `for-tag`, etc.) it will run `test.js`, render `template.marko` and assert that it is equivalent to the content of `expected.html`.
To add a new test, you'll find the appropriate test suite, copy a fixture, and modify it to add the new test.
#### Skipping a test
A few of the tests suites use the same fixtures for multiple test scenarios. For example, the `component-browser` tests run once rendering the component in a browser environment and a second time rendering in a server environment, then hydrating in the browser.
For some tests, it might be necessary to skip the test in one of these scenarios. This is done by exporting a [`skip_hydrate`](https://github.com/marko-js/marko/blob/e3df4936c83a5ef419e8186df14ffc6012fcbdcc/test/components-browser/fixtures/implicit-component/test.js#L10) (or similiarly named) property from the fixture. The value of the property should be a string explaining why the test is skipped.
#### Adding a failing test case
If you've discovered an issue and are able to reproduce it, but don't have a fix, consider submitting a PR with a failing test case. You can mark a fixture as expected to fail by appending exporting a [`fails`](https://github.com/marko-js/marko/blob/0833ada47eeb5c833a11ef01fcd53ae39b0b7491/test/render/fixtures/spread-attribute-function-object/test.js#L1) property from the fixture. The value of the `fails` property should be a string with the issue number. Upon merging a failing test case, a maintainer will update the corresponding issue to add the [`has failing test`](https://github.com/marko-js/marko/labels/has%20failing%20test) label.
In the case that a fixture is used in multiple test scenarios, you can mark the test as failing in a specific scenario by exporting a [`fails_hydrate`](https://github.com/marko-js/marko/blob/e3df4936c83a5ef419e8186df14ffc6012fcbdcc/test/components-browser/fixtures-deprecated/widget-conditional/test.js#L19) (or similarly named) property from the fixture.
Expected failures won't cause [Travis CI](https://travis-ci.org/marko-js/marko) to report a error, but document that there is an issue and give others a starting point for fixing the problem.
### Debugging tests
If you need to dig a bit deeper into a failing test, use the `--inspect-brk` flag, open Chrome DevTools, and click on the green nodejs icon () to start debugging. Learn more about [debugging node](https://www.youtube.com/watch?v=Xb_0awoShR8&t=103s) from this video.
```
npm test -- --grep=test-name --inspect-brk
```
In addition to [setting breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints), you can also add [`debugger;`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statements in both your JavaScript files and Marko templates:
```marko
$ debugger;
Hello ${input.name}!
```
### Updating snapshots
A number of the test suites make use snapshot comparisons. For example, the `render` tests compare the rendered html against a stored snapshot. Similarly, the `compiler` tests compare the generated JavaScript module againt a stored snapshot. Any changes compared to the snapshot should be looked at closely, but there are some cases where it is fine that the output has changed and the snapshot needs to be updated.
To update a snapshot, you can copy the contents from the `actual` file to the `expected` file in the fixture directory. You can also use the `UPDATE_EXPECTATIONS` env variable to cause the test runner to update the `expected` file for all currently failing tests in a suite:
```
UPDATE_EXPECTATIONS=1 npm test
```
## Tackling an existing issue
Comment on the issue and let us know you'd like to tackle it. If for some reason you aren't going to be able to complete the work, let us know as soon as you can so we can open it up for another developer to work on.
Here's some to get started with:
- [good first issue](https://github.com/marko-js/marko/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22): great for new contributors
- [help wanted](https://github.com/marko-js/marko/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) issues: won't be tackled in the near future by the maintainers... we need your help!
- [unassigned](https://github.com/marko-js/marko/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20no%3Aassignee%20) issues: open issues that no one has claimed... yet
- [has failing test](https://github.com/marko-js/marko/labels/has%20failing%20test) issues: open issues that already have a failing test case in the repo. make it pass!
## Reporting bugs and other issues
A great way to contribute to the project is to send a detailed report when you encounter an issue. Even better: submit a PR with a failing test case ([see how](#adding-a-failing-test-case)).
Check that [our issue database](https://github.com/marko-js/marko/issues) doesn't already include that problem or suggestion before submitting an issue. If you find a match, you can use the "subscribe" button to get notified on updates. Rather than leaving a "+1" or "I have this too" comment, you can add a [reaction](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) to let us know that this is also affecting you without cluttering the conversation. However, if you have ways to reproduce the issue or have additional information that may help resolving the issue, please leave a comment.
We have an [ISSUE_TEMPLATE](ISSUE_TEMPLATE.md) that will populate your textarea when you go to open an issue. Use the relevant section and remove the rest.
Please provide as much detail as possible.
### Reporting security issues
If you discover a security issue, please **DO NOT** file a public issue, instead **privately** send your report to one of the members with the `core team` role in the [Discord](https://discord.gg/RFGxYGs).
Security reports are greatly appreciated and we will publicly thank you for it. We currently do not offer a paid security bounty program.
# Labels
Once you post an issue, a maintainer will add one or more labels to it. Below is a guideline for the maintainers and anyone else who is interested in what the various labels mean.
### Type
Every issue should be assigned one of these.
- **bug**: A bug report
- **unverified-bug**: A bug report that has not been verified
- **feature**: A feature request
- **question**: A question about how to do something in Marko
- **community**: Related to community building, improving the contribution process, etc.
- **tech debt**: Related to refactoring code, test structure, etc.
- **docs**: Related to documentation/website
### Scope
What part of the Marko stack does this issue apply to? In most cases there should only be one of these.
- **parser**: Relates to [`htmljs-parser`](https://github.com/marko-js/htmljs-parser)
- **compiler**: Relates to the [compiler](../src/compiler) (server only)
- **runtime**: Relates to the [runtime](../src/runtime) (isomorphic/universal)
- **core-taglib**: Relates to [custom tags](../src/taglib) that ship with Marko
- **components**: Relates to [components](../src/components)
- **tools**: Relates to editor plugins, commandline tools, etc.
### Status
In many cases, additional _actions_ should be taken when applying one of these.
- **backlog**: Tasks planned to be worked on
- **in progress**: This is currently being worked on.
- **needs review**: This issue needs to be followed up on.
### Reason closed
- **resolved**: The question was answered, the bug was fixed, or the feature was implemented.
- **duplicate**: Someone has already posted the same or a very similar issue. A comment should be added that references the original issue.
- **declined**: This feature will not be implemented.
- **not a bug**: This is not a bug, but either user error or intended behavior.
- **inactivity**: There was not enough info to reproduce the bug or not enough interest in the feature to hash out an implementation plan and the conversation has stalled.
- **no issue**: This wasn't so much an issue as a comment
### Other
- **good first issue**: Small tasks that would be good for first time contributors.
- **help wanted**: Not on the roadmap, but we'd love for someone in the community to tackle it.
- **blocked**: Cannot be completed until something else happens first. This should be described in a comment with a link to the blocking issue.
- **needs more info**: The original poster needs to provide more information before action can be taken.
- **user land**: Something that probably won't be added to core, but could be implemented/proved out as a separate module.
================================================
FILE: .github/ISSUE_TEMPLATE/Bug_report.md
================================================
---
name: "\U0001F41BBug report"
about: Something isn't working right
title: ""
labels: "type:unverified bug"
---
### Marko Version: x.x.x
### Details
### Expected Behavior
### Actual Behavior
### Possible Fix
Additional Info
### Your Environment
- Environment name and version (e.g. Chrome 39, node.js 5.4):
- Operating System and version (desktop or mobile):
- Link to your project:
### Steps to Reproduce
1. first...
2.
3.
4.
### Stack Trace
================================================
FILE: .github/ISSUE_TEMPLATE/Feature_request.md
================================================
---
name: "\U0001F680Feature request"
about: Suggest an idea for this project
title: ""
labels: "type:feature"
---
### Description
### Why
### Possible Implementation & Open Questions
### Is this something you're interested in working on?
================================================
FILE: .github/ISSUE_TEMPLATE/Support_question.md
================================================
---
name: "\U00002753Support Question"
about: If you have a question, please check out our Discord or StackOverflow!
title: ""
labels: "type:question"
---
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
## Description
## Checklist:
- [ ] I have read the **CONTRIBUTING** document and have signed (or will sign) the CLA.
- [ ] I have updated/added documentation affected by my changes.
- [ ] I have added tests to cover my changes.
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
pull_request:
types: [opened, synchronize]
push:
branches: [main, v3, v4]
concurrency:
group: "${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }}"
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v6
- name: Use node
uses: actions/setup-node@v6
with:
node-version: 24
cache: npm
- name: Install dependencies
run: npm ci
- name: Build
run: npm run @ci:build
- name: Lint Code
run: npm run @ci:lint
test:
runs-on: ubuntu-latest
name: "test: node@${{ matrix.node }}"
strategy:
fail-fast: false
matrix:
node: [20, 22, 24]
steps:
- name: Checkout code
uses: actions/checkout@v6
- name: Use node@${{ matrix.node }}
uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node }}
cache: npm
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm run @ci:test
- name: Report code coverage
uses: codecov/codecov-action@v5
with:
token: ${{ secrets.CODECOV_TOKEN }}
release:
runs-on: ubuntu-latest
needs: [build, test]
if: ${{ github.repository_owner == 'marko-js' && github.event_name == 'push' }}
permissions:
id-token: write
contents: write
pull-requests: write
steps:
- name: Checkout code
uses: actions/checkout@v6
- name: Setup node
uses: actions/setup-node@v6
with:
node-version: 24
cache: npm
- name: Install dependencies
run: npm ci
- name: Release
id: changesets
uses: changesets/action@v1
with:
version: npm run @ci:version
publish: npm run @ci:release
commit: "[ci] release"
title: "[ci] release"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Release Alias
if: ${{ contains(steps.changesets.outputs.publishedPackages, '"@marko/runtime-tags"') }}
run: npm run @ci:release-alias
================================================
FILE: .gitignore
================================================
# Build
dist
*.marko.js
*actual*
*.tsbuildinfo
### Node ###
# Logs
logs
*.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Dependency directories
node_modules
!packages/runtime-class/src/node_modules
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn
.yarn-integrity
yarn.lock
# dotenv environment variables file
.env
.env.test
### Git ###
# Created by git for backups. To disable backups in Git:
# $ git config --global mergetool.keepBackup false
*.orig
# Created by git when using merge tools for conflicts
*.BACKUP.*
*.BASE.*
*.LOCAL.*
*.REMOTE.*
*_BACKUP_*.txt
*_BASE_*.txt
*_LOCAL_*.txt
*_REMOTE_*.txt
### OS ###
# Linux
*~
.fuse_hidden*
.directory
.Trash-*
.nfs*
# Mac
.DS_Store
.AppleDouble
.LSOverride
._*
Icon
# Windows
*[Tt]humbs*.db*
[Dd]esktop.ini
*.stackdump
*.lnk
### EDITOR ###
# VisualStudioCode
.vscode
.history
*.sublime*
# JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
*.iml
*.ipr
*.iws
modules.xml
.idea
# SublimeText
*.cache
*.sublime-*
Package Control.*
oscrypto-ca-bundle.crt
# TextMate
*.tmproj
*.tmproject
tmtags
# Vim
*.swp
*.vim
.netrwhist
================================================
FILE: .husky/.gitignore
================================================
_
================================================
FILE: .husky/pre-commit
================================================
npm exec -- lint-staged && npm run build && npm run build:sizes && git add .sizes.json && git add .sizes
================================================
FILE: .lintstagedrc.json
================================================
{
"$schema": "https://json.schemastore.org/lintstagedrc.schema.json",
"*.{ts,js}": ["eslint --fix", "prettier --write --with-node-modules"],
"*.{json,md,css}": ["prettier --write --with-node-modules"]
}
================================================
FILE: .mocharc.json
================================================
{
"timeout": 5000,
"enable-source-maps": true,
"require": ["~ts", "mocha-snap"],
"spec": ["packages/*/@(src|test)/**/*.test.@(js|ts)"],
"watchFiles": ["src/**/*.@(js|ts|marko)", "!**/__snapshots__/**"]
}
================================================
FILE: .prettierignore
================================================
__snapshots__
!packages/runtime-class/src/node_modules
.cache
.nvm
.sizes
.sizes.json
.vscode
*actual*
*expected*
~*
CHANGELOG.md
coverage
dist
**/fixtures/*/*
!**/fixtures/*/*.ts
input.*
node_modules
package-lock.json
snapshots
================================================
FILE: .prettierrc.json
================================================
{
"$schema": "https://json.schemastore.org/prettierrc",
"plugins": ["prettier-plugin-packagejson"]
}
================================================
FILE: .sizes/comments.csr/entry.js
================================================
// size: 694 (min) 380 (brotli)
const $if_content__comment_comments = _if_closure(4, 0, ($scope) =>
$input_comments$1($scope.a, $scope._.i),
),
$if_content__setup = ($scope) => {
($if_content__comment_comments._($scope),
$if_content__id._($scope),
$scope.a);
},
$if_content__id = _if_closure(4, 0, ($scope) =>
$input_path$1($scope.a, $scope._.l),
),
$for_content__id = _const(11, ($scope) => {
(_attr($scope.a, "id", $scope.l), $if_content__id($scope));
}),
$for_content__input_path = _for_closure(0, ($scope) =>
$for_content__id($scope, `${$scope._.e || "c"}-${$scope.M}`),
),
$for_content__open__script = _script("a0", ($scope) =>
_on($scope.c, "click", function () {
$for_content__open($scope, !$scope.m);
}),
),
$for_content__open = _let(12, ($scope) => {
(_attr($scope.a, "hidden", !$scope.m),
_text($scope.d, $scope.m ? "[-]" : "[+]"),
$for_content__open__script($scope));
}),
$for_content__setup = ($scope) => {
($for_content__input_path._($scope), $for_content__open($scope, !0));
},
$for_content__if = _if(4, "
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-stopPropagation/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
helpers.triggerClick(component.getEl("button"));
expect(component.divClicked).to.equal(false);
expect(component.buttonClicked).to.equal(true);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-subscribeTo-destroy-subscriber/component.js
================================================
module.exports = {
onMount: function () {},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-subscribeTo-destroy-subscriber/index.marko
================================================
div
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-subscribeTo-destroy-subscriber/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component1 = helpers.mount(require.resolve("./index"), {});
var component2 = helpers.mount(require.resolve("./index"), {});
var fooEvent = null;
var fooEventThis = null;
component1.subscribeTo(component2).on("foo", function fooListener() {
fooEvent = arguments;
// eslint-disable-next-line @typescript-eslint/no-this-alias
fooEventThis = this;
});
component2.emit("foo", "a", "b");
expect(fooEvent[0]).to.equal("a");
expect(fooEvent[1]).to.equal("b");
expect(fooEventThis).to.equal(component2);
fooEvent = null;
component1.destroy();
component2.emit("foo", "a", "b");
expect(fooEvent).to.equal(null);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-subscribeTo-destroy-target/component.js
================================================
module.exports = {
onMount: function () {},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-subscribeTo-destroy-target/index.marko
================================================
div
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-subscribeTo-destroy-target/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component1 = helpers.mount(require.resolve("./index"), {});
var component2 = helpers.mount(require.resolve("./index"), {});
var fooEvent = null;
var fooEventThis = null;
component1.subscribeTo(component2).on("foo", function fooListener() {
fooEvent = arguments;
// eslint-disable-next-line @typescript-eslint/no-this-alias
fooEventThis = this;
});
component2.emit("foo", "a", "b");
expect(fooEvent[0]).to.equal("a");
expect(fooEvent[1]).to.equal("b");
expect(fooEventThis).to.equal(component2);
fooEvent = null;
component2.destroy();
component2.emit("foo", "a", "b");
expect(fooEvent).to.equal(null);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-toggle-spread-attributes/component.js
================================================
module.exports = {
onCreate: function () {
this.state = { attrs: {} };
},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-toggle-spread-attributes/index.marko
================================================
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-toggle-spread-attributes/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
var root = component.el;
expect(root.outerHTML).to.equal("");
component.setState("attrs", { "aria-pressed": true });
component.update();
expect(root.outerHTML).to.equal('');
component.setState("attrs", { "aria-pressed": null });
component.update();
expect(root.outerHTML).to.equal("");
component.setState("attrs", { "aria-pressed": true });
component.update();
expect(root.outerHTML).to.equal('');
component.setState("attrs", { "aria-pressed": false });
component.update();
expect(root.outerHTML).to.equal("");
component.setState("attrs", { "aria-pressed": undefined });
component.update();
expect(root.outerHTML).to.equal("");
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/component.js
================================================
module.exports = {
onInput: function (input) {
var alertType = input.alertType || "success";
var alertMessage = input.alertMessage || "Hello World!";
this.state = {
alertType: alertType,
alertMessage: alertMessage,
};
},
setAlertType: function (newAlertType) {
this.setState("alertType", newAlertType);
},
setAlertMessage: function (newAlertMessage) {
this.setState("alertMessage", newAlertMessage);
},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/components/app-transclusion-alert/component.js
================================================
module.exports = {
onInput: function (input) {
this.state = {
type: input.type || "success",
body: input.message || input.renderBody,
};
},
setType: function (newType) {
this.setState("type", newType);
},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/components/app-transclusion-alert/index.marko
================================================
$ var type = state.type;
$ var className = "alert alert-" + type;
ALERT! ${type}
${state.body}
<${state.body}/>
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/components/app-transclusion-alert/marko-tag.json
================================================
{
"@type": "string",
"@message": "string"
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/index.marko
================================================
$ var alertType=state.alertType
$ var alertMessage=state.alertMessage
${alertType} ${alertMessage}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/marko.json
================================================
{
"tags-dir": "./components"
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-transclusion/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
var el = component.el;
var originalH1Html = el.querySelector("h1").innerHTML;
expect(el.innerHTML).to.contain("alert alert-success");
// The inner HTML for the H1 should not change since only the body content changed
component.setAlertMessage("Hello Universe");
component.update();
expect(el.querySelector("h1").innerHTML).to.equal(originalH1Html);
expect(el.querySelector("h1").innerHTML).to.contain("success");
expect(el.querySelector(".alert").className).to.contain(
"alert alert-success",
);
// The inner HTML for the H1 should change since the state of the alert component changed
component.setAlertType("failure");
component.update();
expect(el.querySelector("h1").innerHTML).to.not.equal(originalH1Html);
expect(el.querySelector("h1").innerHTML).to.contain("failure");
expect(el.querySelector(".alert").className).to.contain(
"alert alert-failure",
);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/component-unescaped-html/index.marko
================================================
class {
onCreate() {
this.state = {
html: ""
}
}
}
A");
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-el-before-component/components/hello/index.marko
================================================
class {
}
Hello: ${input.count}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-el-before-component/index.marko
================================================
class {
onCreate() {
this.state = {
insertEl: false,
count: 0
};
}
}
New element
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-el-before-component/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
// var rootEl = component.el;
var helloComponent = component.getComponent("hello");
expect(component.getEl("root").querySelector(".hello") != null).to.equal(
true,
);
// expect(helloComponent.el.parentNode).to.equal(rootEl);
component.state.insertEl = true;
component.state.count++;
component.update();
expect(component.getEl("root").querySelector(".hello") != null).to.equal(
true,
);
expect(component.getComponent("hello")).to.equal(helloComponent);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-unkeyed-el-before-component/components/hello/index.marko
================================================
class {
}
Hello: ${input.count}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-unkeyed-el-before-component/index.marko
================================================
class {
onCreate() {
this.state = {
insertEl: false,
count: 0
};
}
}
$!{''}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-unkeyed-el-before-component/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
// var rootEl = component.el;
var helloComponent = component.getComponent("hello");
expect(component.getEl("root").querySelector(".hello") != null).to.equal(
true,
);
// expect(helloComponent.el.parentNode).to.equal(rootEl);
component.state.insertEl = true;
component.state.count++;
component.update();
expect(component.getEl("root").querySelector(".hello") != null).to.equal(
true,
);
expect(component.getComponent("hello")).to.equal(helloComponent);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-unkeyed-el-before-preserved-component/components/hello/index.marko
================================================
class {
}
Hello: ${input.count}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-unkeyed-el-before-preserved-component/index.marko
================================================
class {
onCreate() {
this.state = {
insertEl: false,
count: 0
};
}
}
$!{''}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-insert-unkeyed-el-before-preserved-component/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
// var rootEl = component.el;
var helloComponent = component.getComponent("hello");
expect(component.getEl("root").querySelector(".hello") != null).to.equal(
true,
);
// expect(helloComponent.el.parentNode).to.equal(rootEl);
component.state.insertEl = true;
component.state.count++;
component.update();
expect(component.getEl("root").querySelector(".hello") != null).to.equal(
true,
);
expect(component.getComponent("hello")).to.equal(helloComponent);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-mismatch-remove-fragment/index.marko
================================================
class {
onCreate() {
this.state = { count: 0 };
}
}
<${input}/>
abc
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-mismatch-remove-fragment/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
var root = component.getEl("root");
expect(root.innerHTML).to.equal("abc");
var cEl = root.firstElementChild.nextElementSibling.nextElementSibling;
component.state.count++;
component.update();
expect(root.innerHTML).to.equal("c");
expect(cEl).to.equal(root.firstElementChild);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-rearrange-keyed-components/components/hello/index.marko
================================================
class {}
$ var value = input.value;
${value}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-rearrange-keyed-components/index.marko
================================================
class {}
Nested components:
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-rearrange-keyed-components/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
var previousComponents = {};
function checkOrder(letters) {
component.input = { letters: letters };
component.update();
var divs = component.getEl("root").querySelectorAll("div");
expect(divs.length).to.equal(letters.length);
var newComponents = {};
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
var componentForValue = component.getComponent(letter);
expect(componentForValue != null).to.equal(true);
newComponents[letter] = componentForValue;
if (previousComponents[letter]) {
expect(previousComponents[letter]).to.equal(componentForValue);
}
expect(divs[i].id).to.equal(letter);
expect(divs[i].innerHTML).to.equal(letter);
}
Object.keys(previousComponents).forEach(function (letter) {
if (!(letter in newComponents)) {
expect(previousComponents[letter].isDestroyed()).to.equal(true);
}
});
previousComponents = newComponents;
}
checkOrder(["a", "b", "c", "d", "e"]);
// Single component swap
checkOrder(["a", "c", "b", "d", "e"]);
// Single component removal (remove 'C')
checkOrder(["a", "b", "d", "e"]);
// Single component addition
checkOrder(["a", "b", "c", "d", "e"]);
// Double component addition
checkOrder(["a", "b", "b1", "b2", "c", "d", "e"]);
// Double component removal
checkOrder(["a", "b", "c", "d", "e"]);
// Swap b and d
checkOrder(["a", "d", "c", "b", "e"]);
// Swap b and d back to normal
checkOrder(["a", "b", "c", "d", "e"]);
// Swap a and c
checkOrder(["c", "b", "a", "d", "e"]);
// Swap c and a back to normal
checkOrder(["a", "b", "c", "d", "e"]);
// Single component addition to START
checkOrder(["1", "a", "b", "c", "d", "e"]);
// Double component addition to START
checkOrder(["3", "2", "1", "a", "b", "c", "d", "e"]);
// Single component removal from START
checkOrder(["2", "1", "a", "b", "c", "d", "e"]);
// Double component removal from START
checkOrder(["a", "b", "c", "d", "e"]);
// Single component addition to END
checkOrder(["a", "b", "c", "d", "e", "f"]);
// Double component addition to END
checkOrder(["a", "b", "c", "d", "e", "f", "g", "h"]);
// Single component removal from END
checkOrder(["a", "b", "c", "d", "e", "f", "g"]);
// Double component removal from END
checkOrder(["a", "b", "c", "d", "e"]);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-rearrange-keyed-els/index.marko
================================================
class {}
${letter}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-rearrange-keyed-els/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
expect(helpers.targetEl.querySelectorAll("div").length).to.equal(0);
function checkOrder(letters) {
component.input = { letters: letters };
component.update();
var divs = helpers.targetEl.querySelectorAll("div");
expect(divs.length).to.equal(letters.length);
for (var i = 0; i < letters.length; i++) {
expect(divs[i].id).to.equal(letters[i]);
expect(divs[i].innerHTML).to.equal(letters[i]);
}
}
checkOrder(["a", "b", "c", "d", "e"]);
// Single element swap
checkOrder(["a", "c", "b", "d", "e"]);
// Single element removal
checkOrder(["a", "b", "d", "e"]);
// Single element addition
checkOrder(["a", "b", "c", "d", "e"]);
// Double element addition
checkOrder(["a", "b", "b1", "b2", "c", "d", "e"]);
// Double element removal
checkOrder(["a", "b", "c", "d", "e"]);
// Swap b and d
checkOrder(["a", "d", "c", "b", "e"]);
// Swap b and d back to normal
checkOrder(["a", "b", "c", "d", "e"]);
// Single element addition to START
checkOrder(["1", "a", "b", "c", "d", "e"]);
// Double element addition to START
checkOrder(["3", "2", "1", "a", "b", "c", "d", "e"]);
// Single element removal from START
checkOrder(["2", "1", "a", "b", "c", "d", "e"]);
// Double element removal from START
checkOrder(["a", "b", "c", "d", "e"]);
// Single element addition to END
checkOrder(["a", "b", "c", "d", "e", "f"]);
// Double element addition to END
checkOrder(["a", "b", "c", "d", "e", "f", "g", "h"]);
// Single element removal from END
checkOrder(["a", "b", "c", "d", "e", "f", "g"]);
// Double element removal from END
checkOrder(["a", "b", "c", "d", "e"]);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/diffpatch-remove-all-els/index.marko
================================================
class {
onCreate() {
this.state = {
show: true
};
}
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-checkbox/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"));
var firstCheckbox = component.getEl("first");
var secondCheckbox = component.getEl("second");
expect(firstCheckbox.checked).to.equal(true);
expect(secondCheckbox.checked).to.equal(false);
helpers.triggerMouseEvent(firstCheckbox, "click");
expect(firstCheckbox.checked).to.equal(false);
expect(secondCheckbox.checked).to.equal(false);
helpers.triggerMouseEvent(firstCheckbox, "click");
expect(firstCheckbox.checked).to.equal(true);
expect(secondCheckbox.checked).to.equal(false);
helpers.triggerMouseEvent(secondCheckbox, "click");
expect(firstCheckbox.checked).to.equal(true);
expect(secondCheckbox.checked).to.equal(true);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-global/index.marko
================================================
class {
}
Pathname: ${out.global.pathname}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-global/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {
$global: {
pathname: "/",
},
});
expect(component.getEl("current").innerHTML).to.equal("Pathname: /");
component.input = {
$global: {
pathname: "/test",
},
};
component.update();
expect(component.getEl("current").innerHTML).to.equal("Pathname: /test");
};
module.exports.skip_hydrate =
"When hydrating, only one $global value can be passed. This test uses 2.";
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-change/index.marko
================================================
static var renderCount = 0;
class {
}
Hello ${input.name}!
${renderCount++}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-change/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {
name: "Frank",
});
expect(component.el.querySelector(".render-count").innerHTML).to.equal("0");
expect(component.el.querySelector(".name").innerHTML).to.equal("Frank");
// Rerender with a new props object that has the shallow properties
component.input = {
name: "Frank",
};
component.update();
expect(component.el.querySelector(".render-count").innerHTML).to.equal("0");
expect(component.el.querySelector(".name").innerHTML).to.equal("Frank");
// Rerender with a new props object that has the shallow properties
component.input = {
name: "John",
};
component.update();
expect(component.el.querySelector(".render-count").innerHTML).to.equal("1");
expect(component.el.querySelector(".name").innerHTML).to.equal("John");
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-change-nested/components/foo/index.marko
================================================
static var renderCount = 0;
class {
}
Hello ${input.name}!
${renderCount++}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-change-nested/components/foo/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {
name: "Frank",
});
expect(component.el.querySelector(".render-count").innerHTML).to.equal("0");
expect(component.el.querySelector(".name").innerHTML).to.equal("Frank");
// Rerender with a new props object that has the shallow properties
component.input = {
name: "Frank",
};
component.update();
expect(component.el.querySelector(".render-count").innerHTML).to.equal("0");
expect(component.el.querySelector(".name").innerHTML).to.equal("Frank");
// Rerender with a new props object that has the shallow properties
component.input = {
name: "John",
};
component.update();
expect(component.el.querySelector(".render-count").innerHTML).to.equal("1");
expect(component.el.querySelector(".name").innerHTML).to.equal("John");
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-change-nested/index.marko
================================================
class {
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-change-nested/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {
name: "Frank",
});
expect(
component.getComponent("foo").el.querySelector(".render-count").innerHTML,
).to.equal("0");
expect(
component.getComponent("foo").el.querySelector(".name").innerHTML,
).to.equal("Frank");
// Rerender with a new props object that has the shallow properties
component.input = {
name: "Frank",
};
component.update();
expect(
component.getComponent("foo").el.querySelector(".render-count").innerHTML,
).to.equal("0");
expect(
component.getComponent("foo").el.querySelector(".name").innerHTML,
).to.equal("Frank");
// Rerender with a new props object that has the shallow properties
component.input = {
name: "John",
};
component.update();
expect(
component.getComponent("foo").el.querySelector(".render-count").innerHTML,
).to.equal("1");
expect(
component.getComponent("foo").el.querySelector(".name").innerHTML,
).to.equal("John");
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/input-no-value/index.marko
================================================
class {
onInput(input) {
this.state = {
counter: 1
}
}
increment() {
this.state.counter++;
}
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/preserve-nodes-update-scoped-elements/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
var rootEl = component.getEl();
var inputEl = rootEl.querySelector("input");
component.hide();
component.update();
expect(
null === rootEl.querySelector("label"),
"label should have been removed",
).to.equal(true);
expect(
inputEl === rootEl.querySelector("input"),
"input should not have been removed",
).to.equal(true);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/prevent-input-mutation-repeated-at-tags/components/menu/index.marko
================================================
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/replaceChildrenOf/index.marko
================================================
class {}
This should disappearWe'll add a nested UI component just to make sure it is destroyed.
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/replaceChildrenOf/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"));
var initialCounter = component.getComponent("initialCounter");
var counter = require("./components/app-counter").default;
var renderTarget = component.getEl("renderTarget");
expect(renderTarget.innerHTML).to.contain("Count: 0");
counter.renderSync({ value: 99 }).replaceChildrenOf(renderTarget);
expect(renderTarget.innerHTML).to.not.contain("Count: 0");
expect(renderTarget.innerHTML).to.contain("Count: 99");
expect(initialCounter.isDestroyed()).to.equal(true);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-destroy-incompatible/components/bar/index.marko
================================================
class {
onCreate() {
this.isBar = true;
}
}
bar
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-destroy-incompatible/components/foo/index.marko
================================================
class {
onCreate() {
this.isFoo = true;
}
}
foo
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-destroy-incompatible/index.marko
================================================
class {
onCreate() {
this.state = {
target: 'foo'
};
}
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-destroy-incompatible/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {});
expect(component.el.innerHTML).to.contain("foo");
expect(component.el.innerHTML).to.not.contain("bar");
var foo = component.getComponent("child");
expect(foo.isDestroyed()).to.equal(false);
component.state.target = "bar";
component.update();
expect(foo.isDestroyed()).to.equal(true);
var bar = component.getComponent("child");
expect(bar.isDestroyed()).to.equal(false);
expect(component.el.innerHTML).to.not.contain("foo");
expect(component.el.innerHTML).to.contain("bar");
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-multiple-roots/index.marko
================================================
class {
onInput() {
this.state = { count: 0 };
}
}
${state.count}
-- [${state.count}]
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-multiple-roots/test.js
================================================
// Test for issues #749 #690. Using multiple root nodes or style tag at the root would
// cause an infinite loop on rerender. This code does not perform any assertions
// but it will get caught in an infinite loop without the changes in PR #751
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
component.state.count = 1;
component.update();
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-same-root/component.js
================================================
module.exports = {};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-same-root/index.marko
================================================
${input.label}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-same-root/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {
label: "Foo",
});
var rootEl = component.getEl("root");
component.input = {
label: "Bar",
};
component.update();
expect(component.getEl("root")).to.equal(rootEl);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-style-root/index.marko
================================================
class {
onInput() {
this.state = {
count: 0
};
}
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/rerender-style-root/test.js
================================================
// Test for issues #749 #690. Using multiple root nodes or style tag at the root would
// cause an infinite loop on rerender. This code does not perform any assertions
// but it will get caught in an infinite loop without the changes in PR #751
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index"), {});
component.state.count = 1;
component.update();
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/sanity-check-custom-event/components/app-foo/component.js
================================================
module.exports = {
emitTestEvent: function () {
this.emit("test", "abc", "123");
},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/sanity-check-custom-event/components/app-foo/index.marko
================================================
[app-foo]
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/sanity-check-custom-event/index.marko
================================================
class {
onMount() {
var fooEl = document.querySelector('.foo');
var fooComponent = this.fooComponent = require('marko/components').getComponentForEl(fooEl);
fooComponent.emitTestEvent();
}
handleFooTest() {
this.fooEvent = arguments;
}
}
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/sanity-check-custom-event/test.js
================================================
var expect = require("chai").expect;
module.exports = function (helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {
name: "Frank",
});
expect(component.fooEvent.length).to.equal(3);
expect(component.fooEvent[0]).to.equal("abc");
expect(component.fooEvent[1]).to.equal("123");
expect(component.fooEvent[2]).to.equal(component.fooComponent);
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/sanity-check-implicit-bind-component/component.js
================================================
module.exports = {
onInput: function (input) {
this.state = {
name: input.name,
};
},
setName: function (newName) {
this.setState("name", newName);
},
};
================================================
FILE: packages/runtime-class/test/components-browser/fixtures/sanity-check-implicit-bind-component/index.marko
================================================
) to start debugging. Learn more about [debugging node](https://www.youtube.com/watch?v=Xb_0awoShR8&t=103s) from this video.
```
npm test -- --grep=test-name --inspect-brk
```
In addition to [setting breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints), you can also add [`debugger;`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statements in both your JavaScript files and Marko templates:
```marko
$ debugger;