chore(readmes): update

This commit is contained in:
moklick
2023-06-13 17:44:18 +02:00
parent 9dfec49ed5
commit b6d16913f7
5 changed files with 149 additions and 116 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "@xyflow/react", "name": "@xyflow/react",
"version": "11.7.2", "version": "11.7.2",
"description": "Core components and util functions of React Flow.", "description": "A highly customizable React library for building node-based editors and interactive flow charts.",
"keywords": [ "keywords": [
"react", "react",
"node-based UI", "node-based UI",
+37 -16
View File
@@ -1,16 +1,16 @@
# SvelteFlow # Svelte Flow - alpha
A highly customizable Svelte component for building interactive graphs and node-based editors. **This package is currently under heavy development and the API is very likely to change.** Svelte Flow is a highly customizable component for building interactive graphs and node-based editors, built by the creators of React Flow. **This package is currently under heavy development and the API is very likely to change.**
## Getting started ## Installation
If you want to check out the current version you need to run the following command from the root directory: The easiest way to get the latest version of Svelte Flow is to install it via npm, yarn or pnpm:
1. `pnpm install` - install dependencies ```sh
2. `pnpm build` - needs to be done once npm install @xyflow/svelte
3. `pnpm dev` - starts dev server ```
You can now access the examples under http://127.0.0.1:5173 What is “xyflow”? Learn more [here](https://wbkd.notion.site/Upcoming-Changes-at-React-Flow-1a443641891a4069927c0a115e915251).
## Getting started ## Getting started
@@ -21,7 +21,7 @@ A basic flow looks like this:
```svelte ```svelte
<script lang="ts"> <script lang="ts">
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import SvelteFlow, { import { SvelteFlow,
SvelteFlowProvider, SvelteFlowProvider,
Controls, Controls,
Background, Background,
@@ -29,13 +29,7 @@ A basic flow looks like this:
MiniMap, MiniMap,
Panel, Panel,
type NodeTypes type NodeTypes
} from '../../lib/index'; } from '@xyflow/svelte';
import { CustomNode } from './CustomNode';
// Svelte Flow is highly customizable, a node can be anything that fits in a div
const nodeTypes: NodeTypes = {
custom: CustomNode
};
// We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position. // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position.
// This also makes it easier to update nodes in user land. // This also makes it easier to update nodes in user land.
@@ -81,3 +75,30 @@ A basic flow looks like this:
<MiniMap /> <MiniMap />
</SvelteFlow> </SvelteFlow>
``` ```
## Development
If you want to check out the current version you need to run the following command from the root directory:
1. `pnpm install` - install dependencies
2. `pnpm build` - needs to be done once
3. `pnpm dev` - starts dev server
You can now access the examples under http://127.0.0.1:5173
## How to Contribute
**Show us what you make:** Drop it in into our [Discord Server](https://discord.com/invite/Bqt6xrs), [tweet](https://twitter.com/reactflowdev) at us, or email us at info@reactflow.dev
**Community Participation:** Ask and answer questions in our [Discord Server](https://discord.com/invite/Bqt6xrs) or jump in on Github discussions.
**Squash Bugs:** We cant catch them all. Check existing issues and discussions first, then create a new issue to tell us whats up.
**Financial Support:** If you are an organization who wants to make sure Svelte Flow continues to be maintained, reach out to us at info@reactflow.dev
And of course, we love Github stars ⭐
# License
Svelte Flow is MIT Licensed.
+106 -94
View File
@@ -1,10 +1,19 @@
{ {
"name": "@xyflow/svelte", "name": "@xyflow/svelte",
"version": "0.0.1", "version": "0.0.2",
"description": "A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [
"svelte",
"node-based UI",
"graph",
"diagram",
"workflow",
"svelte-flow",
"xyflow"
],
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "svelte-kit sync && svelte-package -o package", "build": "svelte-kit sync && svelte-package -o dist",
"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .", "lint": "prettier --plugin-search-dir . --check . && eslint .",
@@ -14,7 +23,10 @@
"module": "index.ts", "module": "index.ts",
"exports": { "exports": {
"./package.json": "./package.json", "./package.json": "./package.json",
".": "./package/index.js" ".": "./dist/index.js"
},
"publishConfig": {
"access": "public"
}, },
"dependencies": { "dependencies": {
"@svelte-put/shortcut": "^2.0.0", "@svelte-put/shortcut": "^2.0.0",
@@ -42,274 +54,274 @@
"svelte": "^3.56.0" "svelte": "^3.56.0"
}, },
"files": [ "files": [
"package" "dist"
], ],
"svelte": "./package/index.js", "svelte": "./dist/index.js",
"typesVersions": { "typesVersions": {
">4.0": { ">4.0": {
"actions/drag": [ "actions/drag": [
"./package/actions/drag/index.d.ts" "./dist/actions/drag/index.d.ts"
], ],
"actions/drag/utils": [ "actions/drag/utils": [
"./package/actions/drag/utils.d.ts" "./dist/actions/drag/utils.d.ts"
], ],
"actions/portal": [ "actions/portal": [
"./package/actions/portal/index.d.ts" "./dist/actions/portal/index.d.ts"
], ],
"actions/zoom": [ "actions/zoom": [
"./package/actions/zoom/index.d.ts" "./dist/actions/zoom/index.d.ts"
], ],
"components/Attribution/Attribution.svelte": [ "components/Attribution/Attribution.svelte": [
"./package/components/Attribution/Attribution.svelte.d.ts" "./dist/components/Attribution/Attribution.svelte.d.ts"
], ],
"components/Attribution": [ "components/Attribution": [
"./package/components/Attribution/index.d.ts" "./dist/components/Attribution/index.d.ts"
], ],
"components/Attribution/types": [ "components/Attribution/types": [
"./package/components/Attribution/types.d.ts" "./dist/components/Attribution/types.d.ts"
], ],
"components/BaseEdge/BaseEdge.svelte": [ "components/BaseEdge/BaseEdge.svelte": [
"./package/components/BaseEdge/BaseEdge.svelte.d.ts" "./dist/components/BaseEdge/BaseEdge.svelte.d.ts"
], ],
"components/BaseEdge": [ "components/BaseEdge": [
"./package/components/BaseEdge/index.d.ts" "./dist/components/BaseEdge/index.d.ts"
], ],
"components/BaseEdge/types": [ "components/BaseEdge/types": [
"./package/components/BaseEdge/types.d.ts" "./dist/components/BaseEdge/types.d.ts"
], ],
"components/ConnectionLine/ConnectionLine.svelte": [ "components/ConnectionLine/ConnectionLine.svelte": [
"./package/components/ConnectionLine/ConnectionLine.svelte.d.ts" "./dist/components/ConnectionLine/ConnectionLine.svelte.d.ts"
], ],
"components/ConnectionLine": [ "components/ConnectionLine": [
"./package/components/ConnectionLine/index.d.ts" "./dist/components/ConnectionLine/index.d.ts"
], ],
"components/EdgeLabelRenderer/EdgeLabelRenderer.svelte": [ "components/EdgeLabelRenderer/EdgeLabelRenderer.svelte": [
"./package/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte.d.ts" "./dist/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte.d.ts"
], ],
"components/EdgeLabelRenderer": [ "components/EdgeLabelRenderer": [
"./package/components/EdgeLabelRenderer/index.d.ts" "./dist/components/EdgeLabelRenderer/index.d.ts"
], ],
"components/EdgeWrapper/EdgeWrapper.svelte": [ "components/EdgeWrapper/EdgeWrapper.svelte": [
"./package/components/EdgeWrapper/EdgeWrapper.svelte.d.ts" "./dist/components/EdgeWrapper/EdgeWrapper.svelte.d.ts"
], ],
"components/EdgeWrapper": [ "components/EdgeWrapper": [
"./package/components/EdgeWrapper/index.d.ts" "./dist/components/EdgeWrapper/index.d.ts"
], ],
"components/Handle/Handle.svelte": [ "components/Handle/Handle.svelte": [
"./package/components/Handle/Handle.svelte.d.ts" "./dist/components/Handle/Handle.svelte.d.ts"
], ],
"components/Handle/handler": [ "components/Handle/handler": [
"./package/components/Handle/handler.d.ts" "./dist/components/Handle/handler.d.ts"
], ],
"components/Handle": [ "components/Handle": [
"./package/components/Handle/index.d.ts" "./dist/components/Handle/index.d.ts"
], ],
"components/Handle/utils": [ "components/Handle/utils": [
"./package/components/Handle/utils.d.ts" "./dist/components/Handle/utils.d.ts"
], ],
"components/KeyHandler/KeyHandler.svelte": [ "components/KeyHandler/KeyHandler.svelte": [
"./package/components/KeyHandler/KeyHandler.svelte.d.ts" "./dist/components/KeyHandler/KeyHandler.svelte.d.ts"
], ],
"components/KeyHandler": [ "components/KeyHandler": [
"./package/components/KeyHandler/index.d.ts" "./dist/components/KeyHandler/index.d.ts"
], ],
"components/KeyHandler/types": [ "components/KeyHandler/types": [
"./package/components/KeyHandler/types.d.ts" "./dist/components/KeyHandler/types.d.ts"
], ],
"components/NodeSelection/NodeSelection.svelte": [ "components/NodeSelection/NodeSelection.svelte": [
"./package/components/NodeSelection/NodeSelection.svelte.d.ts" "./dist/components/NodeSelection/NodeSelection.svelte.d.ts"
], ],
"components/NodeSelection": [ "components/NodeSelection": [
"./package/components/NodeSelection/index.d.ts" "./dist/components/NodeSelection/index.d.ts"
], ],
"components/NodeWrapper/NodeWrapper.svelte": [ "components/NodeWrapper/NodeWrapper.svelte": [
"./package/components/NodeWrapper/NodeWrapper.svelte.d.ts" "./dist/components/NodeWrapper/NodeWrapper.svelte.d.ts"
], ],
"components/NodeWrapper": [ "components/NodeWrapper": [
"./package/components/NodeWrapper/index.d.ts" "./dist/components/NodeWrapper/index.d.ts"
], ],
"components/NodeWrapper/types": [ "components/NodeWrapper/types": [
"./package/components/NodeWrapper/types.d.ts" "./dist/components/NodeWrapper/types.d.ts"
], ],
"components/Selection/Selection.svelte": [ "components/Selection/Selection.svelte": [
"./package/components/Selection/Selection.svelte.d.ts" "./dist/components/Selection/Selection.svelte.d.ts"
], ],
"components/Selection": [ "components/Selection": [
"./package/components/Selection/index.d.ts" "./dist/components/Selection/index.d.ts"
], ],
"components/SvelteFlowProvider/SvelteFlowProvider.svelte": [ "components/SvelteFlowProvider/SvelteFlowProvider.svelte": [
"./package/components/SvelteFlowProvider/SvelteFlowProvider.svelte.d.ts" "./dist/components/SvelteFlowProvider/SvelteFlowProvider.svelte.d.ts"
], ],
"components/SvelteFlowProvider": [ "components/SvelteFlowProvider": [
"./package/components/SvelteFlowProvider/index.d.ts" "./dist/components/SvelteFlowProvider/index.d.ts"
], ],
"components/SvelteFlowProvider/types": [ "components/SvelteFlowProvider/types": [
"./package/components/SvelteFlowProvider/types.d.ts" "./dist/components/SvelteFlowProvider/types.d.ts"
], ],
"components/UserSelection/UserSelection.svelte": [ "components/UserSelection/UserSelection.svelte": [
"./package/components/UserSelection/UserSelection.svelte.d.ts" "./dist/components/UserSelection/UserSelection.svelte.d.ts"
], ],
"components/UserSelection": [ "components/UserSelection": [
"./package/components/UserSelection/index.d.ts" "./dist/components/UserSelection/index.d.ts"
], ],
"components/edges/BezierEdge.svelte": [ "components/edges/BezierEdge.svelte": [
"./package/components/edges/BezierEdge.svelte.d.ts" "./dist/components/edges/BezierEdge.svelte.d.ts"
], ],
"components/edges/SmoothStepEdge.svelte": [ "components/edges/SmoothStepEdge.svelte": [
"./package/components/edges/SmoothStepEdge.svelte.d.ts" "./dist/components/edges/SmoothStepEdge.svelte.d.ts"
], ],
"components/edges/StraightEdge.svelte": [ "components/edges/StraightEdge.svelte": [
"./package/components/edges/StraightEdge.svelte.d.ts" "./dist/components/edges/StraightEdge.svelte.d.ts"
], ],
"components/nodes/DefaultNode.svelte": [ "components/nodes/DefaultNode.svelte": [
"./package/components/nodes/DefaultNode.svelte.d.ts" "./dist/components/nodes/DefaultNode.svelte.d.ts"
], ],
"components/nodes/InputNode.svelte": [ "components/nodes/InputNode.svelte": [
"./package/components/nodes/InputNode.svelte.d.ts" "./dist/components/nodes/InputNode.svelte.d.ts"
], ],
"components/nodes/OutputNode.svelte": [ "components/nodes/OutputNode.svelte": [
"./package/components/nodes/OutputNode.svelte.d.ts" "./dist/components/nodes/OutputNode.svelte.d.ts"
], ],
"container/EdgeRenderer/EdgeRenderer.svelte": [ "container/EdgeRenderer/EdgeRenderer.svelte": [
"./package/container/EdgeRenderer/EdgeRenderer.svelte.d.ts" "./dist/container/EdgeRenderer/EdgeRenderer.svelte.d.ts"
], ],
"container/EdgeRenderer": [ "container/EdgeRenderer": [
"./package/container/EdgeRenderer/index.d.ts" "./dist/container/EdgeRenderer/index.d.ts"
], ],
"container/EdgeRenderer/utils": [ "container/EdgeRenderer/utils": [
"./package/container/EdgeRenderer/utils.d.ts" "./dist/container/EdgeRenderer/utils.d.ts"
], ],
"container/NodeRenderer/NodeRenderer.svelte": [ "container/NodeRenderer/NodeRenderer.svelte": [
"./package/container/NodeRenderer/NodeRenderer.svelte.d.ts" "./dist/container/NodeRenderer/NodeRenderer.svelte.d.ts"
], ],
"container/NodeRenderer": [ "container/NodeRenderer": [
"./package/container/NodeRenderer/index.d.ts" "./dist/container/NodeRenderer/index.d.ts"
], ],
"container/Pane/Pane.svelte": [ "container/Pane/Pane.svelte": [
"./package/container/Pane/Pane.svelte.d.ts" "./dist/container/Pane/Pane.svelte.d.ts"
], ],
"container/Pane": [ "container/Pane": [
"./package/container/Pane/index.d.ts" "./dist/container/Pane/index.d.ts"
], ],
"container/Panel/Panel.svelte": [ "container/Panel/Panel.svelte": [
"./package/container/Panel/Panel.svelte.d.ts" "./dist/container/Panel/Panel.svelte.d.ts"
], ],
"container/Panel": [ "container/Panel": [
"./package/container/Panel/index.d.ts" "./dist/container/Panel/index.d.ts"
], ],
"container/Panel/types": [ "container/Panel/types": [
"./package/container/Panel/types.d.ts" "./dist/container/Panel/types.d.ts"
], ],
"container/SvelteFlow/SvelteFlow.svelte": [ "container/SvelteFlow/SvelteFlow.svelte": [
"./package/container/SvelteFlow/SvelteFlow.svelte.d.ts" "./dist/container/SvelteFlow/SvelteFlow.svelte.d.ts"
], ],
"container/SvelteFlow": [ "container/SvelteFlow": [
"./package/container/SvelteFlow/index.d.ts" "./dist/container/SvelteFlow/index.d.ts"
], ],
"container/SvelteFlow/types": [ "container/SvelteFlow/types": [
"./package/container/SvelteFlow/types.d.ts" "./dist/container/SvelteFlow/types.d.ts"
], ],
"container/Viewport/Viewport.svelte": [ "container/Viewport/Viewport.svelte": [
"./package/container/Viewport/Viewport.svelte.d.ts" "./dist/container/Viewport/Viewport.svelte.d.ts"
], ],
"container/Viewport": [ "container/Viewport": [
"./package/container/Viewport/index.d.ts" "./dist/container/Viewport/index.d.ts"
], ],
"container/Zoom/Zoom.svelte": [ "container/Zoom/Zoom.svelte": [
"./package/container/Zoom/Zoom.svelte.d.ts" "./dist/container/Zoom/Zoom.svelte.d.ts"
], ],
"container/Zoom": [ "container/Zoom": [
"./package/container/Zoom/index.d.ts" "./dist/container/Zoom/index.d.ts"
], ],
"hooks/useSvelteFlow": [ "hooks/useSvelteFlow": [
"./package/hooks/useSvelteFlow.d.ts" "./dist/hooks/useSvelteFlow.d.ts"
], ],
"index": [ "index": [
"./package/index.d.ts" "./dist/index.d.ts"
], ],
"plugins/Background/Background.svelte": [ "plugins/Background/Background.svelte": [
"./package/plugins/Background/Background.svelte.d.ts" "./dist/plugins/Background/Background.svelte.d.ts"
], ],
"plugins/Background/DotPattern.svelte": [ "plugins/Background/DotPattern.svelte": [
"./package/plugins/Background/DotPattern.svelte.d.ts" "./dist/plugins/Background/DotPattern.svelte.d.ts"
], ],
"plugins/Background/LinePattern.svelte": [ "plugins/Background/LinePattern.svelte": [
"./package/plugins/Background/LinePattern.svelte.d.ts" "./dist/plugins/Background/LinePattern.svelte.d.ts"
], ],
"plugins/Background": [ "plugins/Background": [
"./package/plugins/Background/index.d.ts" "./dist/plugins/Background/index.d.ts"
], ],
"plugins/Background/types": [ "plugins/Background/types": [
"./package/plugins/Background/types.d.ts" "./dist/plugins/Background/types.d.ts"
], ],
"plugins/Controls/ControlButton.svelte": [ "plugins/Controls/ControlButton.svelte": [
"./package/plugins/Controls/ControlButton.svelte.d.ts" "./dist/plugins/Controls/ControlButton.svelte.d.ts"
], ],
"plugins/Controls/Controls.svelte": [ "plugins/Controls/Controls.svelte": [
"./package/plugins/Controls/Controls.svelte.d.ts" "./dist/plugins/Controls/Controls.svelte.d.ts"
], ],
"plugins/Controls/Icons/Fit.svelte": [ "plugins/Controls/Icons/Fit.svelte": [
"./package/plugins/Controls/Icons/Fit.svelte.d.ts" "./dist/plugins/Controls/Icons/Fit.svelte.d.ts"
], ],
"plugins/Controls/Icons/Lock.svelte": [ "plugins/Controls/Icons/Lock.svelte": [
"./package/plugins/Controls/Icons/Lock.svelte.d.ts" "./dist/plugins/Controls/Icons/Lock.svelte.d.ts"
], ],
"plugins/Controls/Icons/Minus.svelte": [ "plugins/Controls/Icons/Minus.svelte": [
"./package/plugins/Controls/Icons/Minus.svelte.d.ts" "./dist/plugins/Controls/Icons/Minus.svelte.d.ts"
], ],
"plugins/Controls/Icons/Plus.svelte": [ "plugins/Controls/Icons/Plus.svelte": [
"./package/plugins/Controls/Icons/Plus.svelte.d.ts" "./dist/plugins/Controls/Icons/Plus.svelte.d.ts"
], ],
"plugins/Controls/Icons/Unlock.svelte": [ "plugins/Controls/Icons/Unlock.svelte": [
"./package/plugins/Controls/Icons/Unlock.svelte.d.ts" "./dist/plugins/Controls/Icons/Unlock.svelte.d.ts"
], ],
"plugins/Controls": [ "plugins/Controls": [
"./package/plugins/Controls/index.d.ts" "./dist/plugins/Controls/index.d.ts"
], ],
"plugins/Controls/types": [ "plugins/Controls/types": [
"./package/plugins/Controls/types.d.ts" "./dist/plugins/Controls/types.d.ts"
], ],
"plugins/Minimap/Minimap.svelte": [ "plugins/Minimap/Minimap.svelte": [
"./package/plugins/Minimap/Minimap.svelte.d.ts" "./dist/plugins/Minimap/Minimap.svelte.d.ts"
], ],
"plugins/Minimap/MinimapNode.svelte": [ "plugins/Minimap/MinimapNode.svelte": [
"./package/plugins/Minimap/MinimapNode.svelte.d.ts" "./dist/plugins/Minimap/MinimapNode.svelte.d.ts"
], ],
"plugins/Minimap": [ "plugins/Minimap": [
"./package/plugins/Minimap/index.d.ts" "./dist/plugins/Minimap/index.d.ts"
], ],
"plugins/Minimap/types": [ "plugins/Minimap/types": [
"./package/plugins/Minimap/types.d.ts" "./dist/plugins/Minimap/types.d.ts"
], ],
"store/connection-path": [ "store/connection-path": [
"./package/store/connection-path.d.ts" "./dist/store/connection-path.d.ts"
], ],
"store/edges-layouted": [ "store/edges-layouted": [
"./package/store/edges-layouted.d.ts" "./dist/store/edges-layouted.d.ts"
], ],
"store": [ "store": [
"./package/store/index.d.ts" "./dist/store/index.d.ts"
], ],
"store/initial-store": [ "store/initial-store": [
"./package/store/initial-store.d.ts" "./dist/store/initial-store.d.ts"
], ],
"store/types": [ "store/types": [
"./package/store/types.d.ts" "./dist/store/types.d.ts"
], ],
"types/edges": [ "types/edges": [
"./package/types/edges.d.ts" "./dist/types/edges.d.ts"
], ],
"types/general": [ "types/general": [
"./package/types/general.d.ts" "./dist/types/general.d.ts"
], ],
"types": [ "types": [
"./package/types/index.d.ts" "./dist/types/index.d.ts"
], ],
"types/nodes": [ "types/nodes": [
"./package/types/nodes.d.ts" "./dist/types/nodes.d.ts"
], ],
"utils": [ "utils": [
"./package/utils/index.d.ts" "./dist/utils/index.d.ts"
] ]
} }
} }
+1 -1
View File
@@ -1,6 +1,6 @@
# @xyflow/system # @xyflow/system
Types for React Flow. Core system that powers React Flow and Svelte Flow.
## Installation ## Installation
+4 -4
View File
@@ -138,10 +138,10 @@ importers:
specifiers: specifiers:
'@svelte-put/shortcut': ^2.0.0 '@svelte-put/shortcut': ^2.0.0
'@sveltejs/adapter-auto': ^2.1.0 '@sveltejs/adapter-auto': ^2.1.0
'@sveltejs/kit': ^1.20.1 '@sveltejs/kit': 1.20.2
'@sveltejs/package': ^2.0.2 '@sveltejs/package': ^2.0.2
'@typescript-eslint/eslint-plugin': ^5.59.9 '@typescript-eslint/eslint-plugin': 5.59.11
'@typescript-eslint/parser': ^5.59.9 '@typescript-eslint/parser': 5.59.11
'@xyflow/system': workspace:* '@xyflow/system': workspace:*
classcat: ^5.0.4 classcat: ^5.0.4
eslint: ^8.42.0 eslint: ^8.42.0
@@ -151,7 +151,7 @@ importers:
prettier-plugin-svelte: ^2.10.1 prettier-plugin-svelte: ^2.10.1
svelte: ^3.59.1 svelte: ^3.59.1
svelte-check: ^3.4.3 svelte-check: ^3.4.3
tslib: ^2.4.1 tslib: 2.5.3
typescript: 5.1.3 typescript: 5.1.3
vite: ^4.3.9 vite: ^4.3.9
dependencies: dependencies: