fix js setup
Semantic delta
No definition changed: this change is text, documentation or data.
1 files · +5 −11
diff --git a/docs/src/pages/docs/javascript.mdx b/docs/src/pages/docs/javascript.mdx
index bb1c2b9f0..163725bdc 100644
--- a/docs/src/pages/docs/javascript.mdx
+++ b/docs/src/pages/docs/javascript.mdx
@@ -5,20 +5,12 @@ export default Layout;
Start by creating a new project using `npm` / `yarn` and adding the `stretch-layout` dependency.
<Code lang="bash">{`
-mkdir my-app && cd my-app
-npm init -y
+npm init wasm-app my-app
+cd my-app
npm install --save stretch-layout
`}</Code>
-Or using yarn.
-
-<Code lang="bash">{`
-mkdir my-app && cd my-app
-yarn init -y
-yarn add stretch-layout
-`}</Code>
-
-We are ready to use Stretch! Open up `index.js` and replace its contents with the following. Once finished you should be able to run it with `node index.js` to see the results of this basic layout calculation in the logs.
+We are ready to use Stretch! Open up `index.js` and replace its contents with the following. Once finished you should be able to run it with `npm run start` to see the results of this basic layout calculation in the logs.
<Code lang="typescript" file="index.js">{`
import { Node } from 'stretch-layout';
@@ -29,6 +21,8 @@ const layout = node.computeLayout();
console.log(layout.width, layout.height);
`}</Code>
+To integrate Stretch into an existing app you will need to use a bundler such as webpack which supports web assembly. Have a look at the code generated by the project setup above to get a sense of what configuration is needed.
+
# Basics
`Node`s are the core building blocks of a stretch layout tree. A node needs a `Style` which describes the `flexbox` properties for the node. By adding nodes as children to a parent node we create a tree which we can perform layout on. The result of a layout computation is a tree of `Layout` nodes. This tree matches the structure of the `Node` tree but contains the computed layout of each node.