<script>
import { openBrowser, openComponent } from "doc/PX2018/project_2/utils.js"
</script>
<link rel="stylesheet" type="text/css" href="doc/PX2018/project_2/utils.css">

# CSS Improvements

- [x] Scrolling the script editor
- [x] Highlight the start of the loop
- [x] Implement add button
- [x] Implement insert button to insert scripts in between

# Stuff

- Async script possible
- Problems: both cases must be handled separately, ::config does not work anymore

## Example

### Transform

``` javascript
import { config } from 'src/client/vivide/utils.js';

(async (input, output) => {
  for (let item of input) {
    output.push(await fetch(item))
  }
})
```

### Extract

``` javascript
import { config } from 'src/client/vivide/utils.js';

(item => ({
  label: item.url.split('/').pop() + ' (' + item.status + ')'
}))::config({
  
})
```