durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 07:12:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Feat/os fixes (#65)

Browse Source 
* Feat: Add notices of creating empty git repos

* Feat: remove references to workspaces and cloud and add notices of old videos
This commit is contained in:
kotte
2024-01-25 10:19:52 +01:00
committed by GitHub
parent 02b3c9145b
commit 85c6474c00
12 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
javascript/extending/create-lib.md
View File

@@ -6,19 +6,21 @@ title: Create a new core node
# Create a new core node
Noodl is very extensible. As a developer you can add new modules with new capablities, create connections to data or make new visual components in your workspace. This guide gets us started by showing how the Noodl command line tool works and how to create an extension module with a single new node. This node will behave and appear just like the standard core nodes of Noodl.
Noodl is very extensible. As a developer you can add new modules with new capablities, create connections to data or make new visual components for your projects. This guide gets us started by showing how the Noodl command line tool works and how to create an extension module with a single new node. This node will behave and appear just like the standard core nodes of Noodl.
:::note
This guide requires <a href="https://nodejs.org/en/download/" target="_blank">Node.js</a> and <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" target="_blank">npm</a> installed.
:::
## Overview
This guide will walk you through how to create a **Noodl Module**. A Noodl Module can contain new core nodes to use in your projects. You can for example wrap an existing JavaScript library and expose it as a node in Noodl.
The general process works like this
* Set up a new **Module Project** where you can write the code for your module.
* Test your module in one of you projects while developing it.
* When you are done, build the module and deploy it to the projects you want to use it in.
- Set up a new **Module Project** where you can write the code for your module.
- Test your module in one of you projects while developing it.
- When you are done, build the module and deploy it to the projects you want to use it in.
## Install the Noodl CLI
@@ -29,6 +31,7 @@ npm install -g @noodl/noodl-cli
```
## Create a Module Project
With the CLI tool you can easily create a new Noodl module from a template:
```bash
@@ -53,7 +56,6 @@ First some notes on the content of a library module:
- The **module** directory contains the source code for the module as well as build scripts and any assets you might want, such as fonts, css etc.
- The **project** and **tests** folder can be ignored
First enter the **module** directory and install the needed dependencies:
```bash
@@ -68,7 +70,7 @@ If your module uses any other external libraries through NPM they will be instal
## Developing your module
You develop your module mainly by editing the file ``module/src/index.js``. From start it contains some example code that you can use as a boiler plate. There is currently no official documenation of the Noodl module SDK but you can find the source code to a number of modules [here](https://github.com/noodlapp).
You develop your module mainly by editing the file `module/src/index.js`. From start it contains some example code that you can use as a boiler plate. There is currently no official documenation of the Noodl module SDK but you can find the source code to a number of modules [here](https://github.com/noodlapp).
As you are developing your module you would want it packaged up and deployed in a Noodl project where you can test it. To do that you first have to create a new Noodl project that will be your test project. Once you've done that, find the local folder of that project by clickin the cogwheel ("Settings") and "Open project folder".
@@ -80,13 +82,17 @@ As you are developing your module you would want it packaged up and deployed in
Copy the full path to that folder - you will need it in the next step.
Now open the file ``/module/src/webpack.config.js``. Among other things, this file specifies where to deploy the module. We want to make sure its deployed to our test project.
Update the row containing ``var outputPath = ...`` to the following
Now open the file `/module/src/webpack.config.js`. Among other things, this file specifies where to deploy the module. We want to make sure its deployed to our test project.
Update the row containing `var outputPath = ...` to the following
```javascript
var outputPath = path.resolve('<the absolute path that your project>', 'noodl_modules/' + pjson.name);
var outputPath = path.resolve(
'<the absolute path that your project>',
'noodl_modules/' + pjson.name
);
```
Now go back to your terminal window (that was located in the ``modules/`` folder) and write the following.
Now go back to your terminal window (that was located in the `modules/` folder) and write the following.
```bash
npm run dev
@@ -94,7 +100,7 @@ npm run dev
This will enter development mode where your module is automatically rebuilt and redeployed to your project when you make changes in the source code.
If you started from the boiler plate code in ``module/src/index.js`` you will already have a module now in your project. Reload the Noodl project by closing it and opening it again, or simply press ctrl+R (Windows) / cmd+R (Mac) when you are in the Node Editor. Then bring up the Node Picker and you should see your new core node under "External Libraries".
If you started from the boiler plate code in `module/src/index.js` you will already have a module now in your project. Reload the Noodl project by closing it and opening it again, or simply press ctrl+R (Windows) / cmd+R (Mac) when you are in the Node Editor. Then bring up the Node Picker and you should see your new core node under "External Libraries".
## Overview of the module code
@@ -106,7 +112,7 @@ First you must import the Noodl SDK.
const Noodl = require('@noodl/noodl-sdk');
```
Next you will define the code for the new node.
Next you will define the code for the new node.
```javascript
const MyFullNameNode = Noodl.defineNode({
@@ -152,10 +158,10 @@ Again, check out the [Noodl Repo](https://github.com/noodlapp) at GitHub for som
## Deploying your module
When you are happy with your module you can do a proper deploy. Go back to the terminal window (still in the ``modules/`` folder) and write.
When you are happy with your module you can do a proper deploy. Go back to the terminal window (still in the `modules/` folder) and write.
```bash
npm run build
```
This deploys an optimized version of the module. If you want to use the module in a different project, just change the path in ``/module/src/webpack.config.js`` and do ```npm run build``` again.
This deploys an optimized version of the module. If you want to use the module in a different project, just change the path in `/module/src/webpack.config.js` and do `npm run build` again.

74
javascript/extending/create-react-lib.md
View File

@@ -6,11 +6,11 @@ title: Create a Visual node with React
# Create a Visual node with React
Noodl is built with React which makes it easy for you to add custom or community React components to your workspace. This guide will help you create a React library from scratch and push it to your Noodl workspace.
Noodl is built with React which makes it easy for you to add custom or community React components to your projects. This guide will help you create a React library from scratch and push it to a Noodl project.
## Setup
In order to complete this guide you must install the _Noodl CLI_ and learn how to push the module to your workspace. Please review [this guide](/javascript/extending/create-lib) first.
In order to complete this guide you must install the _Noodl CLI_ and learn how to push the module to a project. Please review [this guide](/javascript/extending/create-lib) first.
With the CLI tool you can easily create a new react library module from a template:
@@ -34,12 +34,12 @@ my-react-lib/
Just like in the introductory [guide](/javascript/extending/create-lib) the folder contains the **project** and **tests** subfolders that you may to import into Noodl. Especially the **tests** folder is a good place to play around with your library and create tests to make sure the component is working as expected.
:::note
It is important that you do not change the name of the **project** and **tests** folders. The build scripts in the _module_ folder is dependent on these names or it will not build the module properly and you cannot push to your workspace.
It is important that you do not change the name of the **project** and **tests** folders. The build scripts in the _module_ folder is dependent on these names or it will not build the module properly making it unusable in your projects.
:::
## A tour of the code
Now you have created a new React library module from the template and you have pushed it to your Noodl workspace. Let's review the code a bit to get you up and running.
Now you have created a new React library module from the template and you have pushed it to Noodl. Let's review the code a bit to get you up and running.
The react code can be found in the **module** directory.
@@ -62,19 +62,19 @@ First a simple React component:
```javascript
function MyCustomReactComponent(props) {
const style = {
color: props.textColor,
backgroundColor: props.backgroundColor,
borderRadius: '10px',
padding: '20px',
marginBottom: props.marginBottom,
}
const style = {
color: props.textColor,
backgroundColor: props.backgroundColor,
borderRadius: '10px',
padding: '20px',
marginBottom: props.marginBottom,
};
return (
<div style={style} onClick={props.onClick}>
{props.children}
</div>
)
return (
<div style={style} onClick={props.onClick}>
{props.children}
</div>
);
}
```
@@ -82,22 +82,22 @@ Next the export of the component to Noodl:
```javascript
const MyCustomReactComponentNode = Noodl.defineReactNode({
name: 'Custom React Component',
category: 'Tutorial',
getReactComponent() {
return MyCustomReactComponent
name: 'Custom React Component',
category: 'Tutorial',
getReactComponent() {
return MyCustomReactComponent;
},
inputProps: {
backgroundColor: { type: 'color', default: 'white' },
marginBottom: {
type: { name: 'number', units: ['px'], defaultUnit: 'px' },
default: 10,
},
inputProps: {
backgroundColor: { type: 'color', default: 'white' },
marginBottom: {
type: { name: 'number', units: ['px'], defaultUnit: 'px' },
default: 10,
},
},
outputProps: {
onClick: { type: 'signal', displayName: 'Click' },
},
})
},
outputProps: {
onClick: { type: 'signal', displayName: 'Click' },
},
});
```
In addition to how you would specify a simple Noodl node, as in the introductory [guide](/javascript/extending/create-lib), you must provide the _getReactComponent_ function that retuns the React component. You may also specify _inputProps_ and _outputProps_ that map to the properties of the React node and will become inputs and outputs of your Noodl node.
@@ -108,10 +108,10 @@ Finally the component is provided as part of your module declaration. Here you n
```javascript
Noodl.defineModule({
reactNodes: [MyCustomReactComponentNode],
nodes: [],
setup() {
//this is called once on startup
},
})
reactNodes: [MyCustomReactComponentNode],
nodes: [],
setup() {
//this is called once on startup
},
});
```

4
javascript/extending/overview.md
View File

@@ -6,10 +6,10 @@ title: Extending Noodl
# Extending Noodl
One important aspect to improve productivity is extending your Noodl workspace with library modules that are tailored for your organizations needs.
One important aspect to improve productivity is extending your Noodl project with library modules that are tailored for your organizations needs.
[Create a new core node](/javascript/extending/create-lib)
This guide will show you how to install the Noodl CLI and create a single simple new core node in Noodl. This is a good starting point to cover before diving into the other guides.
[Create a React component](/javascript/extending/create-react-lib)
This guide will show you how to add React components to your Noodl workspace so that you can quickly build great front ends for your applications.
This guide will show you how to add React components to your Noodl project so that you can quickly build great front ends for your applications.

2
javascript/reference/objects/README.md
View File

@@ -9,7 +9,7 @@ title: Noodl.Objects
One step above **Variable**s are **Object**s,
this is a global data model of Noodl objects.
Each object is referenced with an **Id** and can contain a set of properties.
You can access all objects in your workspace through their **Id** and the `Noodl.Objects` prefix.
You can access all objects in your project through their **Id** and the `Noodl.Objects` prefix.
Change a property of an object will trigger all connections from object nodes with the corresponding **Id** and property.
You can learn more about objects and how you use them in your Noodl applications [here](/docs/guides/data/objects).