outbound-link
7 | `; 8 | 9 | exports[`NavLink renders nav link with internal link 1`] = ` 10 | 11 | VuePress 12 | 13 | `; 14 | -------------------------------------------------------------------------------- /packages/pulse-core/lib/helpers/isWatchableObj.ts: -------------------------------------------------------------------------------- 1 | export function isWatchableObject(value) { 2 | function isHTMLElement(obj) { 3 | try { 4 | return obj instanceof HTMLElement; 5 | } catch (e) { 6 | return typeof obj === 'object' && obj.nodeType === 1 && typeof obj.style === 'object' && typeof obj.ownerDocument === 'object'; 7 | } 8 | } 9 | let type = typeof value; 10 | return value != null && type == 'object' && !isHTMLElement(value) && !Array.isArray(value); 11 | } 12 | -------------------------------------------------------------------------------- /packages/pulse-core/lib/tracker.ts: -------------------------------------------------------------------------------- 1 | import { Pulse } from './pulse'; 2 | import { IJob } from './internal'; 3 | 4 | export class Tracker { 5 | jobs: Set22 |
23 | 24 |
3 |
13 |
14 |
15 |
31 |
--------------------------------------------------------------------------------
/docs/v2/developers/ideas.md:
--------------------------------------------------------------------------------
1 | ```js
2 | import Pulse from 'pulse-framework';
3 |
4 | const pulse = new Pulse();
5 |
6 | pulse.on('EVENT_NAME', this, payload => console.log(payload));
7 |
8 | pulse.emit('EVENT_NAME', {});
9 |
10 | export const collection = pulse.createCollection();
11 |
12 | export const someData = collection
13 | .createData(defaultValue)
14 | .persist()
15 | .watch(() => {});
16 |
17 | export const myGroup = collection.createGroup([]);
18 |
19 | someData.value;
20 | someData.set();
21 | someData.subscribe(this);
22 |
23 | collection.createAction('getChannels', () => {});
24 |
25 | export const myComputedValue = collection.createComputed(() => {}, [someData]);
26 | ```
27 |
--------------------------------------------------------------------------------
/docs/.vuepress/theme/styles/arrow.styl:
--------------------------------------------------------------------------------
1 | @require './config'
2 |
3 | .arrow
4 | display inline-block
5 | width 0
6 | height 0
7 | &.up
8 | border-left 4px solid transparent
9 | border-right 4px solid transparent
10 | border-bottom 6px solid $arrowBgColor
11 | &.down
12 | border-left 4px solid transparent
13 | border-right 4px solid transparent
14 | border-top 6px solid $arrowBgColor
15 | &.right
16 | border-top 4px solid transparent
17 | border-bottom 4px solid transparent
18 | border-left 6px solid $arrowBgColor
19 | &.left
20 | border-top 4px solid transparent
21 | border-bottom 4px solid transparent
22 | border-right 6px solid $arrowBgColor
23 |
--------------------------------------------------------------------------------
/docs/.vuepress/theme/components/Page.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
9 | Take me home.
10 |
11 |
12 | 404
5 | 6 |{{ getMsg() }}7 | 8 |
5 |
15 |
16 | `;
17 |
--------------------------------------------------------------------------------
/examples/typescript/vue/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
18 |
19 | 
20 |
27 |
28 | );
29 | }
30 |
31 | export default MyApp;
32 |
--------------------------------------------------------------------------------
/docs/v3/resources/snippets.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Snippets
3 | ---
4 |
5 | ### Snippets for VSCode
6 |
7 | **Install:** bottom-right cog > user snippets > your_language.json
8 |
9 | ### API Route `TypeScript`
10 |
11 | ```json
12 | {
13 | "Pulse Route": {
14 | "prefix": "proute",
15 | "body": [
16 | "export const ${1:name} = async (payload: any): Promise
21 | Edit src/App.tsx and save to reload.
22 |
3 | 
4 |
6 |
7 |
8 |
33 |
34 |
44 |
--------------------------------------------------------------------------------
/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
1 | export default ({ Vue, router }) => {
2 | Vue.mixin({
3 | computed: {
4 | versions() {
5 | const { $themeConfig } = this;
6 | return Object.getOwnPropertyNames($themeConfig.sidebar);
7 | },
8 | isDocs() {
9 | const { $frontmatter } = this;
10 | if ($frontmatter.home === true) {
11 | return false;
12 | } else {
13 | return true;
14 | }
15 | }
16 | }
17 | }),
18 | router.addRoutes([
19 | { path: '/v1.html', redirect: '/v1/introduction/what-is-pulse' },
20 | { path: '/v1', redirect: '/v1/introduction/what-is-pulse' },
21 | { path: '/v2.html', redirect: '/v2/introduction/what-is-pulse' },
22 | { path: '/v2', redirect: '/v2/introduction/what-is-pulse' },
23 | { path: '/v3.html', redirect: '/v3/introduction/what-is-pulse' },
24 | { path: '/v3', redirect: '/v3/introduction/what-is-pulse' }
25 | ]);
26 | };
27 |
--------------------------------------------------------------------------------
/docs/v1/guide/filters.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Filters
3 | ---
4 |
5 | ### Filters
6 |
7 | Filters allow you to alter data before passing it to your component without changing the original data. Essentially getters in VueX.
8 |
9 | They're cached for performance, meaning the output of the filter function is what gets served to the component, so each time it is accessed the entire filter doesn't need to re-run.
10 |
11 | Each filter is analyzed to see which data properties they depend on, and when those data properties change the appropriate filters regenerate.
12 |
13 | ```js
14 | channels: {
15 | groups: ['subscribed'],
16 | filters: {
17 | liveChannels({ groups }) => {
18 | return groups.subscribed.filter(channel => channel.live === true)
19 | }
20 | }
21 | }
22 | ```
23 |
24 | Filters have access to the context object (see [Context Object](/guide/context-object.html)) as the first parameter.
25 |
26 | Filters can also be dependent on each other via the context object.
27 |
--------------------------------------------------------------------------------
/docs/.vuepress/theme/__tests__/components/NavLink.spec.js:
--------------------------------------------------------------------------------
1 | import { mount, RouterLinkStub } from '@vue/test-utils'
2 | import { createLocalVue } from '@vuepress/test-utils/client'
3 | import NavLink from '../../components/NavLink.vue'
4 |
5 | describe('NavLink', () => {
6 | test('renders nav link with internal link', () => {
7 | const item = {
8 | link: '/',
9 | text: 'VuePress'
10 | }
11 | const wrapper = mount(NavLink, {
12 | localVue: createLocalVue(),
13 | stubs: {
14 | 'RouterLink': RouterLinkStub
15 | },
16 | propsData: { item }
17 | })
18 | expect(wrapper.html()).toMatchSnapshot()
19 | })
20 |
21 | test('renders nav link with external link', () => {
22 | const item = {
23 | link: 'http://vuejs.org/',
24 | text: 'Vue'
25 | }
26 | const wrapper = mount(NavLink, {
27 | localVue: createLocalVue(),
28 | propsData: { item }
29 | })
30 | expect(wrapper.html()).toMatchSnapshot()
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/docs/v3/getting-started/setup-with-vue.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Setup With Vue
3 | ---
4 |
5 | # Vue Setup
6 |
7 | ::: danger NOT USABLE YET
8 | Vue was a large part of previous versions, so we're eager to add Vue support for the many people in the Pulse community that use Vue. We're still testing the best way to implement this below is the current plan, though this syntax is subject to change.
9 | :::
10 |
11 | ## Installation
12 |
13 | ```
14 | yarn add @pulsejs/core @pulsejs/vue
15 | ```
16 |
17 | ## Initialization
18 |
19 | ```ts
20 | import Pulse from '@pulsejs/vue';
21 |
22 | export const App = new Pulse();
23 | ```
24 |
25 | ## Example
26 |
27 | ```ts
28 | import Vue from 'vue';
29 | import Pulse from '@pulsejs/vue';
30 |
31 | export const App = new Pulse();
32 |
33 | const core = App.Core({
34 | MY_STATE: App.State(true)
35 | });
36 |
37 | export default new Vue({
38 | el: '#vue',
39 | data: {
40 | ...this.mapCore(core => ({
41 | localName: core.MY_STATE
42 | }))
43 | }
44 | });
45 | ```
46 |
--------------------------------------------------------------------------------
/docs/v4/getting-started/setup-with-vue.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Setup With Vue
3 | ---
4 |
5 | # Vue Setup
6 |
7 | ::: danger NOT USABLE YET
8 | Vue was a large part of previous versions, so we're eager to add Vue support for the many people in the Pulse community that use Vue. We're still testing the best way to implement this below is the current plan, though this syntax is subject to change.
9 | :::
10 |
11 | ## Installation
12 |
13 | ```
14 | yarn add @pulsejs/core @pulsejs/vue
15 | ```
16 |
17 | ## Initialization
18 |
19 | ```ts
20 | import Pulse from '@pulsejs/vue';
21 |
22 | export const App = new Pulse();
23 | ```
24 |
25 | ## Example
26 |
27 | ```ts
28 | import Vue from 'vue';
29 | import Pulse from '@pulsejs/vue';
30 |
31 | export const App = new Pulse();
32 |
33 | const core = App.Core({
34 | MY_STATE: App.State(true)
35 | });
36 |
37 | export default new Vue({
38 | el: '#vue',
39 | data: {
40 | ...this.mapCore(core => ({
41 | localName: core.MY_STATE
42 | }))
43 | }
44 | });
45 | ```
46 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | // {
8 | // "type": "pwa-chrome",
9 | // "request": "launch",
10 | // "name": "Launch Chrome against localhost",
11 | // "url": "http://localhost:8080",
12 | // "webRoot": "${workspaceFolder}"
13 | // },
14 | {
15 | "type": "node",
16 | "request": "launch",
17 | "name": "Core Jest Tests",
18 | "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
19 | "args": [
20 | "-i"
21 | ],
22 | "internalConsoleOptions": "openOnSessionStart",
23 | "outFiles": [
24 | "${workspaceRoot}/packages/pulse-core/**/*"
25 | ]
26 | }
27 | ]
28 | }
--------------------------------------------------------------------------------
/docs/.vuepress/theme/global-components/Badge.vue:
--------------------------------------------------------------------------------
1 |
25 |
26 |
45 |
--------------------------------------------------------------------------------
/packages/pulse-react/lib/index.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Pulse, { Integration } from '@pulsejs/core';
3 |
4 | export { PulseHOC } from './pulseHOC';
5 | export { usePulse } from './usePulse';
6 | export { useEvent } from './useEvent';
7 | export { useWatcher } from './useWatcher';
8 |
9 | export * from '@pulsejs/core';
10 | export default Pulse;
11 |
12 | // declare pulse plugin
13 | export const PulseReact = new Integration({
14 | name: 'react',
15 | foreignInstance: React,
16 | // used by the pulseHOC
17 | updateMethod(component, payload) {
18 | // UpdatedData will be empty if the PulseHOC doesn't get an object as deps
19 | if (Object.keys(payload).length !== 0) {
20 | // Update Props
21 | component.updatedProps = { ...component.updatedProps, ...payload };
22 |
23 | // Set State (Rerender)
24 | component.setState(payload);
25 | } else {
26 | // Force Update (Rerender)
27 | component.forceUpdate();
28 | }
29 | }
30 | });
31 |
32 | Pulse.initialIntegrations.push(PulseReact);
33 |
--------------------------------------------------------------------------------
/packages/pulse-core/lib/collection/model.ts:
--------------------------------------------------------------------------------
1 | import { DefaultDataItem } from '../internal';
2 |
3 | interface DataPropertyConfig
4 | ${info ? `
\n'
55 | }],
56 | ['smooth-scroll', enableSmoothScroll]
57 | ]
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/packages/pulse-core/lib/integrate.ts:
--------------------------------------------------------------------------------
1 | import { Pulse } from './pulse';
2 |
3 | export interface IntegrationConfig${info}
` : ''}\n`, 54 | after: () => '
41 |
45 | );
46 | };
47 |
48 | const testRender = renderer.create({myStringSingle}
42 |{myStringDestructured}
43 |{myHookArray[0]}
44 |10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /examples/typescript/vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 2 |
3 |
31 |
32 |
33 |
41 |
42 |
43 |
59 |
--------------------------------------------------------------------------------
/packages/pulse-core/lib/status.ts:
--------------------------------------------------------------------------------
1 | import { Pulse } from './pulse';
2 | import { State } from './internal';
3 | import { copy } from './utils';
4 |
5 | interface StatusObjectData {
6 | message: string | null;
7 | status: 'invalid' | 'success' | 'error' | null;
8 | }
9 |
10 | const initialData: StatusObjectData = {
11 | message: null,
12 | status: null
13 | };
14 |
15 | export class StatusTracker {
16 | //@ts-ignore
17 | public state: State<{ [key: string]: StatusObjectData }>;
18 |
19 | public get all(): { [key: string]: StatusObjectData } {
20 | return this.state.value;
21 | }
22 |
23 | constructor(private instance: () => Pulse) {
24 | this.state = new State(instance, {});
25 | }
26 |
27 | public get(key: string): StatusObjectData {
28 | return this?.state?.value[key];
29 | }
30 |
31 | public set(key: string): StatusObject {
32 | if (!this.state.value[key]) {
33 | this.state.set(Object.assign(copy(this.state.value), { [key]: initialData }));
34 | }
35 |
36 | return new StatusObject(this.state, key);
37 | }
38 |
39 | public remove(key: string): void {
40 | if (!this.state.value[key]) return;
41 |
42 | const copiedState: { [key: string]: StatusObjectData } = copy(this.state.value);
43 |
44 | copiedState[key] = undefined;
45 | delete copiedState[key];
46 |
47 | this.state.set(copiedState);
48 | }
49 |
50 | public clear(key?: string): void {
51 | // clearing a specific value
52 | if (key) {
53 | if (!this.state.value[key]) return;
54 |
55 | const copiedState: { [key: string]: StatusObjectData } = copy(this.state.value);
56 |
57 | copiedState[key] = initialData;
58 |
59 | this.state.set(copiedState);
60 |
61 | return;
62 | }
63 |
64 | this.state.reset();
65 | }
66 | }
67 |
68 | export class StatusObject {
69 | constructor(private state: State<{ [key: string]: StatusObjectData }>, private key: string) {}
70 |
71 | public status(newStatus: 'invalid' | 'success' | 'error' | 'none'): StatusObject {
72 | this.state.nextState[this.key].status = newStatus === 'none' ? null : newStatus;
73 | this.state.set();
74 | return this;
75 | }
76 | public message(messageText: string): StatusObject {
77 | this.state.nextState[this.key].message = messageText;
78 | this.state.set();
79 | return this;
80 | }
81 | }
82 |
83 | export default StatusTracker;
84 |
--------------------------------------------------------------------------------
/packages/pulse-react/lib/usePulse.ts:
--------------------------------------------------------------------------------
1 | import { Pulse, State, normalizeDeps, getPulseInstance, Group } from '@pulsejs/core';
2 | import React from 'react';
3 |
4 | globalThis.React1 = React;
5 |
6 | // usePulse returns the State value, or an array of State values, not the instances themselves.
7 | // This type will extract the inferred value of State
8 | // We use a TypeScript ternary to detect which type of Pulse class we're working with.
9 | export type PulseValue{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 | 14 |Essential Links
15 |-
16 |
- Core Docs 17 |
- Forum 18 |
- Community Chat 19 |
- News 21 |
Ecosystem
23 |-
24 |
- vue-router 25 |
- vuex 26 |
- vue-devtools 27 |
- vue-loader 28 |
- awesome-vue 29 |