3 | use-machine 4 |
5 | 8 |
9 | {{#if this.isOn}}
10 | On
11 | {{/if}}
12 | {{#if this.isOff}}
13 | Off
14 | {{/if}}
15 |
16 | 3 | @statechart-computed 4 |
5 | 8 |
9 | {{#if this.isOn}}
10 | On
11 | {{/if}}
12 | {{#if this.isOff}}
13 | Off
14 | {{/if}}
15 |
16 |
2 | Counter Count: {{this.statechart.state.context.count}}
3 |
4 |
5 |
31 |
--------------------------------------------------------------------------------
/packages/site/app/components/docs/typescript-usage.js:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { tracked } from '@glimmer/tracking';
4 | import { task, timeout } from 'ember-concurrency';
5 |
6 | export default class extends Component {
7 | @tracked
8 | failRequest = false;
9 |
10 | @tracked
11 | disabled = false;
12 |
13 | // BEGIN-SNIPPET typescript-usage
14 |
15 | // ...
16 |
17 | @(task(function* () {
18 | yield timeout(1000);
19 |
20 | if (this.failRequest) {
21 | throw 'wat';
22 | }
23 | }).drop())
24 | submitTask;
25 |
26 | @action
27 | onSuccess() {
28 | window.alert('Submit successful');
29 | }
30 |
31 | @action
32 | onError() {
33 | window.alert('Submit failed');
34 | }
35 | // ...
36 | // END-SNIPPET
37 | }
38 |
--------------------------------------------------------------------------------
/packages/site/app/components/counter-restart.hbs:
--------------------------------------------------------------------------------
1 |
6 | {{#if this.isActive}}
7 |
8 | Deactivate
9 |
10 | {{else}}
11 |
12 | Activate
13 |
14 | {{/if}}
15 |
16 |
17 |
21 | -
22 |
23 |
27 | +
28 |
29 |
30 |
2 | Counter Count: {{this.statechart.state.context.count}}
3 |
4 |
5 |
31 |
--------------------------------------------------------------------------------
/packages/site/public/effective-ember.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/site/app/components/docs/quickstart-final.js:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { tracked } from '@glimmer/tracking';
4 | import { task, timeout } from 'ember-concurrency';
5 |
6 | export default class extends Component {
7 | @tracked
8 | failRequest = false;
9 |
10 | @tracked
11 | disabled = false;
12 |
13 | // BEGIN-SNIPPET quickstart-button-final-used
14 |
15 | // ...
16 |
17 | @(task(function* () {
18 | yield timeout(1000);
19 |
20 | if (this.failRequest) {
21 | throw 'wat';
22 | }
23 | }).drop())
24 | submitTask;
25 |
26 | @action
27 | onSuccess() {
28 | window.alert('Submit successful');
29 | }
30 |
31 | @action
32 | onError() {
33 | window.alert('Submit failed');
34 | }
35 | // ...
36 | // END-SNIPPET
37 | }
38 |
--------------------------------------------------------------------------------
/packages/site/app/components/mobile-docs-toc.hbs:
--------------------------------------------------------------------------------
1 |
6 | {{#if this.isActive}}
7 |
8 | Deactivate
9 |
10 | {{else}}
11 |
12 | Activate
13 |
14 | {{/if}}
15 |
16 |
17 |
21 | -
22 |
23 |
27 | +
28 |
29 |
30 |
2 |
23 | {{#if this.showToc}}
24 |
30 |
--------------------------------------------------------------------------------
/packages/site/.docfy-config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const autolinkHeadings = require('remark-autolink-headings');
3 | const docfyWithProse = require('@docfy/plugin-with-prose');
4 | const prism = require('@mapbox/rehype-prism');
5 | const refractor = require('refractor');
6 |
7 | refractor.alias('handlebars', 'hbs');
8 | refractor.alias('shell', 'sh');
9 |
10 | module.exports = {
11 | tocMaxDepth: 3,
12 | sources: [
13 | {
14 | root: path.resolve(__dirname, '../../docs'),
15 | pattern: '**/*.md',
16 | urlPrefix: 'docs',
17 | },
18 | ],
19 | remarkPlugins: [
20 | [
21 | autolinkHeadings,
22 | {
23 | behavior: 'wrap',
24 | },
25 | ],
26 | ],
27 | plugins: [docfyWithProse],
28 | rehypePlugins: [prism],
29 | labels: {
30 | components: 'Components',
31 | workflow: 'Workflow',
32 | docs: 'Documentation',
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/packages/test-app/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberApp = require('ember-cli/lib/broccoli/ember-app');
4 |
5 | module.exports = function (defaults) {
6 | let app = new EmberApp(defaults, {
7 | // Add options here
8 | });
9 |
10 | // Use `app.import` to add additional libraries to the generated
11 | // output files.
12 | //
13 | // If you need to use different assets in different
14 | // environments, specify an object as the first parameter. That
15 | // object's keys should be the environment name and the values
16 | // should be the asset to use in that environment.
17 | //
18 | // If the library that you are including contains AMD or ES6
19 | // modules that you would like to import into your application
20 | // please specify an object with the list of modules as keys
21 | // along with the exports of each module as its value.
22 |
23 | return app.toTree();
24 | };
25 |
--------------------------------------------------------------------------------
/packages/site/app/machines/quickstart-button.js:
--------------------------------------------------------------------------------
1 | // BEGIN-SNIPPET quickstart-button-machine
2 | import { Machine } from 'xstate';
3 |
4 | export default Machine(
5 | {
6 | initial: 'idle',
7 | states: {
8 | idle: {
9 | on: {
10 | SUBMIT: 'busy',
11 | },
12 | },
13 | busy: {
14 | entry: ['handleSubmit'],
15 | on: {
16 | SUCCESS: 'success',
17 | ERROR: 'error',
18 | },
19 | },
20 | success: {
21 | entry: ['handleSuccess'],
22 | on: {
23 | SUBMIT: 'busy',
24 | },
25 | },
26 | error: {
27 | entry: ['handleError'],
28 | on: {
29 | SUBMIT: 'busy',
30 | },
31 | },
32 | },
33 | },
34 | {
35 | actions: {
36 | handleSubmit() {},
37 | handleSuccess() {},
38 | handleError() {},
39 | },
40 | }
41 | );
42 | // END-SNIPPET
43 |
--------------------------------------------------------------------------------
/packages/site/public/youtube.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/site/lib/versioned-doc-info.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | 'use strict';
3 |
4 | const getRepoInfo = require('git-repo-info');
5 |
6 | module.exports = function (deployTarget) {
7 | let dir, name, rootURL;
8 | let { sha, tag, branch } = getRepoInfo();
9 |
10 | if (deployTarget === 'tag') {
11 | dir = tag;
12 | name = tag;
13 | branch = null;
14 | } else if (deployTarget === 'branch') {
15 | dir = branch;
16 | name = branch;
17 | tag = null;
18 | } else if (deployTarget === 'latest') {
19 | dir = 'latest';
20 | name = 'Latest';
21 | } else {
22 | throw new Error(`unsupported deploy target ${deployTarget}`);
23 | }
24 |
25 | let destDir = `versions/${dir}`;
26 |
27 | if (deployTarget === 'latest') {
28 | rootURL = '/';
29 | } else {
30 | rootURL = `/${destDir}/`;
31 | }
32 |
33 | return {
34 | name,
35 | sha,
36 | tag,
37 | branch,
38 | destDir,
39 | rootURL,
40 | deployTarget,
41 | };
42 | };
43 |
--------------------------------------------------------------------------------
/packages/ember-statecharts/README.md:
--------------------------------------------------------------------------------
1 | ember-statecharts
2 | ==============================================================================
3 |
4 | [Short description of the addon.]
5 |
6 |
7 | Compatibility
8 | ------------------------------------------------------------------------------
9 |
10 | * Ember.js v3.20 or above
11 | * Ember CLI v3.20 or above
12 | * Node.js v12 or above
13 |
14 |
15 | Installation
16 | ------------------------------------------------------------------------------
17 |
18 | ```
19 | ember install ember-statecharts
20 | ```
21 |
22 |
23 | Usage
24 | ------------------------------------------------------------------------------
25 |
26 | [Longer description of how to use the addon in apps.]
27 |
28 |
29 | Contributing
30 | ------------------------------------------------------------------------------
31 |
32 | See the [Contributing](CONTRIBUTING.md) guide for details.
33 |
34 |
35 | License
36 | ------------------------------------------------------------------------------
37 |
38 | This project is licensed under the [MIT License](LICENSE.md).
39 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2020
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/packages/site/app/machines/counter-machine.js:
--------------------------------------------------------------------------------
1 | // BEGIN-SNIPPET counter-machine
2 | import { Machine, assign } from 'xstate';
3 |
4 | export default Machine({
5 | id: 'counterMachine',
6 | initial: 'inactive',
7 | context: {
8 | count: 0,
9 | },
10 | on: {
11 | RESET_COUNT: {
12 | actions: [
13 | assign({
14 | count: (_context, { count }) => count,
15 | }),
16 | ],
17 | },
18 | },
19 | states: {
20 | inactive: {
21 | on: {
22 | ACTIVATE: 'active',
23 | },
24 | },
25 | active: {
26 | on: {
27 | DEACTIVATE: 'inactive',
28 | INCREMENT: {
29 | target: 'active',
30 | actions: [
31 | assign({
32 | count: (context) => context.count + 1,
33 | }),
34 | ],
35 | },
36 | DECREMENT: {
37 | target: 'active',
38 | actions: [
39 | assign({
40 | count: (context) => context.count - 1,
41 | }),
42 | ],
43 | },
44 | },
45 | },
46 | },
47 | });
48 | // END-SNIPPET
49 |
--------------------------------------------------------------------------------
/packages/site/app/components/counter-restart.js:
--------------------------------------------------------------------------------
1 | // BEGIN-SNIPPET counter-update-restart
2 | import Component from '@glimmer/component';
3 | import { action } from '@ember/object';
4 | import { useMachine, matchesState } from 'ember-statecharts';
5 | import CounterMachine from '../machines/counter-machine';
6 |
7 | export default class CounterComponent extends Component {
8 | statechart = useMachine(this, () => {
9 | return {
10 | machine: CounterMachine.withContext({
11 | count: this.args.count,
12 | }),
13 | update: ({ restart }) => {
14 | restart();
15 | },
16 | };
17 | });
18 |
19 | @matchesState('active')
20 | isActive;
21 |
22 | @matchesState('inactive')
23 | isDisabled;
24 |
25 | @action
26 | decrement() {
27 | this.statechart.send('DECREMENT');
28 | }
29 |
30 | @action
31 | increment() {
32 | this.statechart.send('INCREMENT');
33 | }
34 |
35 | @action
36 | activate() {
37 | this.statechart.send('ACTIVATE');
38 | }
39 |
40 | @action
41 | deactivate() {
42 | this.statechart.send('DEACTIVATE');
43 | }
44 | }
45 | // END-SNIPPET
46 |
--------------------------------------------------------------------------------
/packages/site/app/components/docs-toc.hbs:
--------------------------------------------------------------------------------
1 |
25 |
28 | {{/if}}
29 | -
3 | {{#each node.pages as |page|}}
4 |
-
5 |
11 | {{page.title}} 12 | 13 |
14 | {{/each}}
15 |
16 | {{#each node.children as |child|}}
17 | -
18 | 19 | {{child.label}} 20 |21 |
-
22 | {{#each child.pages as |page|}}
23 |
-
24 |
29 | {{page.title}} 30 | 31 |
32 | {{/each}}
33 |
35 | {{/each}}
36 | -
24 |
3 | {{! BEGIN-SNIPPET quickstart-button-used }}
4 |
9 | Click me!
10 |
11 | {{! END-SNIPPET }}
12 |
25 |
13 |
16 |
23 |
24 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/packages/ember-statecharts/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{content-for "head"}}
10 | {{content-for "test-head"}}
11 |
12 |
13 |
14 |
15 |
16 | {{content-for "head-footer"}}
17 | {{content-for "test-head-footer"}}
18 |
19 |
20 | {{content-for "body"}}
21 | {{content-for "test-body"}}
22 |
23 |
24 |
26 |
27 |
28 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/packages/site/app/components/demo.hbs:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
6 |
39 |
7 | {{yield (hash ui=(hash useSnippet=showcase.ui.useSnippet))}}
8 |
9 |
10 |
38 |
11 | {{#each showcase.state.snippets as |snippet|}}
12 |
28 | {{/each}}
29 |
30 | {{#if showcase.state.activeSnippet}}
31 |
26 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {{content-for "body-footer"}}
38 | {{content-for "test-body-footer"}}
39 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/site/app/components/docs/typescript-usage.hbs:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
3 | {{! BEGIN-SNIPPET typed-button-used }}
4 |
10 | .ts FTW
11 |
12 | {{! END-SNIPPET }}
13 |
38 |
14 |
17 |
24 |
25 |
26 |
29 |
36 |
37 |
3 | {{! BEGIN-SNIPPET quickstart-button-final-used }}
4 |
10 | Click me!
11 |
12 | {{! END-SNIPPET }}
13 |
38 |
14 |
17 |
24 |
25 |
26 |
29 |
36 |
37 | -
2 |
- 3 | 9 | 23 | API Reference 24 | 25 | 26 |
- 27 | 33 | useMachine 34 | 35 | 36 |
- 37 | 43 | matchesState 44 | 45 | 46 |
- 47 | 53 | interpreterFor 54 | 55 | 56 |
4 |
5 | {{#if page.headings.length}}
6 |
58 |
59 |
--------------------------------------------------------------------------------
/packages/site/app/components/docs-header.hbs:
--------------------------------------------------------------------------------
1 | {{!-- template-lint-disable --}}
2 | -
7 |
- 8 | 15 | 16 | {{#each page.headings as |heading|}} 17 |
-
18 |
29 | {{heading.title}}
30 |
31 |
32 | {{#if heading.headings.length}}
33 |
-
34 | {{#each heading.headings as |subHeading|}}
35 |
- 36 | 47 | {{subHeading.title}} 48 | 49 | 50 | {{/each}} 51 |
54 | {{/each}}
55 |
4 |
5 | {{#docs-header/link "index"}}
6 |
7 | {{svg-jar "statecharts" width=48 height=48 class="docs-fill-none"}}
8 |
9 | {{/docs-header/link}}
10 |
11 |
51 |
12 | {{#docs-header/link "docs"}}
13 | Documentation
14 | {{/docs-header/link}}
15 |
16 | {{yield (hash
17 | link=(component "docs-header/link")
18 | )}}
19 |
20 |
21 |
22 | {{#docs-header/link on-click=(action (toggle "isShowingVersionSelector" this))}}
23 |
24 |
25 | {{#if (eq currentVersion.key latestVersionName)}}
26 | {{#if currentVersion.tag}}
27 | {{currentVersion.tag}}
28 | {{else}}
29 | Latest
30 | {{/if}}
31 | {{else}}
32 | {{currentVersion.name}}
33 | {{/if}}
34 |
35 | {{svg-jar "caret" height=12 width=12}}
36 |
37 | {{/docs-header/link}}
38 |
39 | {{#if projectHref}}
40 | {{#docs-header/link href=projectHref}}
41 |
42 | {{svg-jar "github" width=24 height=24}}
43 |
44 | {{/docs-header/link}}
45 | {{/if}}
46 |
47 | {{!-- Something to take up space on mobile, so the scrolling nav isn't hugging the edge --}}
48 |
49 |
50 |
2 |
68 |
--------------------------------------------------------------------------------
/packages/test-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Small description for test-app goes here",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
16 | "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
17 | "lint:hbs": "ember-template-lint .",
18 | "lint:hbs:fix": "ember-template-lint . --fix",
19 | "lint:js": "eslint . --cache",
20 | "lint:js:fix": "eslint . --fix",
21 | "start": "ember serve",
22 | "test": "npm-run-all lint test:*",
23 | "test:ember": "ember test --test-port=0",
24 | "test:ember-compatibility": "ember try:each"
25 | },
26 | "devDependencies": {
27 | "@ember/optional-features": "^2.0.0",
28 | "@ember/test-helpers": "^2.4.2",
29 | "@embroider/test-setup": "^0.43.5",
30 | "@glimmer/component": "^1.0.4",
31 | "@glimmer/tracking": "^1.0.4",
32 | "babel-eslint": "^10.1.0",
33 | "broccoli-asset-rev": "^3.0.0",
34 | "ember-auto-import": "^1.11.3",
35 | "ember-cli": "~3.28.4",
36 | "ember-cli-app-version": "^5.0.0",
37 | "ember-cli-babel": "^7.26.6",
38 | "ember-cli-dependency-checker": "^3.2.0",
39 | "ember-cli-htmlbars": "^5.7.1",
40 | "ember-cli-inject-live-reload": "^2.1.0",
41 | "ember-cli-sri": "^2.1.1",
42 | "ember-cli-terser": "^4.0.2",
43 | "ember-data": "~3.28.0",
44 | "ember-export-application-global": "^2.0.1",
45 | "ember-fetch": "^8.1.1",
46 | "ember-load-initializers": "^2.1.2",
47 | "ember-maybe-import-regenerator": "^0.1.6",
48 | "ember-page-title": "^6.2.2",
49 | "ember-qunit": "^5.1.4",
50 | "ember-resolver": "^8.0.2",
51 | "ember-source": "~3.28.0",
52 | "ember-source-channel-url": "^3.0.0",
53 | "ember-statecharts": "^0.13.2",
54 | "ember-template-lint": "^3.6.0",
55 | "ember-try": "^1.4.0",
56 | "eslint": "^7.32.0",
57 | "eslint-config-prettier": "^8.3.0",
58 | "eslint-plugin-ember": "^10.5.4",
59 | "eslint-plugin-node": "^11.1.0",
60 | "eslint-plugin-prettier": "^3.4.1",
61 | "eslint-plugin-qunit": "^6.2.0",
62 | "loader.js": "^4.7.0",
63 | "npm-run-all": "^4.1.5",
64 | "prettier": "^2.3.2",
65 | "qunit": "^2.16.0",
66 | "qunit-dom": "^1.6.0",
67 | "xstate": "^4.12.0"
68 | },
69 | "engines": {
70 | "node": "12.* || 14.* || >= 16"
71 | },
72 | "ember": {
73 | "edition": "octane"
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/packages/site/app/machines/typed-button.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-empty-function */
2 | // BEGIN-SNIPPET typed-button-machine
3 | import { createMachine } from 'xstate';
4 |
5 | export interface ButtonContext {
6 | disabled?: boolean;
7 | }
8 |
9 | export type ButtonEvent =
10 | | { type: 'SUBMIT' }
11 | | { type: 'SUCCESS'; result: any }
12 | | { type: 'ERROR'; error: any }
13 | | { type: 'ENABLE' }
14 | | { type: 'DISABLE' };
15 |
16 | export type ButtonState =
17 | | { value: 'idle'; context: { disabled?: boolean } }
18 | | { value: 'busy'; context: { disabled?: boolean } }
19 | | { value: 'success'; context: { disabled?: boolean } }
20 | | { value: 'error'; context: { disabled?: boolean } };
21 |
22 | export default createMachine
3 |
67 |
4 |
9 |
5 |
8 |
10 |
12 |
18 |
63 |
66 |
15 | {{outlet}}
16 |
17 |
21 |
22 |
61 |
62 |
23 | {{#if previous}}
24 |
35 |
36 |
37 | {{previous.title}}
38 |
39 | {{/if}}
40 |
41 |
42 | {{#if next}}
43 |
44 | {{next.title}}
45 |
46 |
47 |
58 | {{/if}}
59 |
60 |
55 | 
56 |