ember-statechart-component
Use XState Machines as components.
Installation
ember install ember-statechart-component
# or
npm install ember-statechart-component
# or
yarn add ember-statechart-component
Usage
Example with Ember Octane
// app/components/toggle.js
import { createMachine } from 'xstate';
export default createMachine({
initial: 'inactive',
states: {
inactive: { on: { TOGGLE: 'active' } },
active: { on: { TOGGLE: 'inactive' } },
},
});
Usage:
The default template for every createMachine(..) is
but that can be overriden to suit your needs by defining your own template.the this is an instance of the XState Interpreter
Accessing Services
// app/components/authenticated-toggle.js
import { getService } from 'ember-statechart-component';
import { createMachine } from 'xstate';
export default createMachine({
initial: 'inactive',
states: {
inactive: {
on: {
TOGGLE: [
{
target: 'active',
cond: 'isAuthenticated',
},
{ actions: ['notify'] },
],
},
},
active: { on: { TOGGLE: 'inactive' } },
},
}, {
actions: {
notify: (ctx) => {
getService(ctx, 'toasts').notify('You must be logged in');
},
},
guards: {
isAuthenticated: (ctx) => getService(ctx, 'session').isAuthenticated,
},
});
Usage:
Matching States
XState provides its own matchesmethod which is available on the state object.We can utilize this provided there exists a HelperManager forhandling vanilla functions, such as whatember-could-get-used-to-thisprovides.
API
@config
This argument allows you to pass a MachineConfig for actions, services, guards, etc
@context
Sets the initial context
@state
The machine will use this state as the initial state. Any changes tothis argument are ignored.
What happens if any of the passed args change?
An event will be sent to the machine for you, ARGS_UPDATE, alongwith all named arguments used to invoke the component.
Compatibility
- Ember.js v3.25 or above
- Node.js v12 or above
- A browser that supports Proxy
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.
-
The framework implements UML statecharts in C++ and Java. Next to the standard elements of FSMs, hierarchical and concurrent states are as well supported as pseudostates, segmented transitions, timed
-
Ember检查器是一个浏览器插件，用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由，数据选项卡和库信息 您可以看到检查
-
英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release，Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客
-
ember-date-components An Ember add-on which provides pure Ember-based date picker components. Compatibility Ember.js v3.16 or above Ember CLI v2.13 or above Node.js v10 or above Installation ember ins
-
ember-react-components Consume React components in Ember This addon is a proof-of-concept for an approach to rendering React components in Ember. It is almost entirely inspired by a blog post by Sivak
-
ember-emojione ember-emojione is your emoji solution for Ember, based on the EmojiOne project. EmojiOne version 2 is used, which is free to use for everyone (CC BY-SA 4.0), you're only required to giv