# dhis2-query-editor

> This project allows users to access an web editor which they can write code in. This editor uses the Ace Editor (https://ace.c9.io/), however it's using the React Extension of it (https://github.com/securingsincity/react-ace)

Latest version **0.2.1** (published 2022-08-14) · 0 weekly downloads

## Install

```sh
npm install dhis2-query-editor
pnpm add dhis2-query-editor
yarn add dhis2-query-editor
bun add dhis2-query-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-08-14 |
| First published | 2022-08-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | leifhaa |

## Links

- npm: https://www.npmjs.com/package/dhis2-query-editor
- Repository: https://github.uio.no/Lehaaken/DHIS2-api-playground
- npm.io page: https://npm.io/package/dhis2-query-editor

## Dependencies (12)

- [webpack](https://npm.io/package/webpack.md) ^5.74.0
- [@dhis2/ui](https://npm.io/package/@dhis2/ui.md) ^7.4.1
- [react-ace](https://npm.io/package/react-ace.md) ^10.1.0
- [styled-jsx](https://npm.io/package/styled-jsx.md) ^3.2.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-modal](https://npm.io/package/react-modal.md) 3.15.1
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@dhis2/app-runtime](https://npm.io/package/@dhis2/app-runtime.md) *
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.3.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 0.2.1 (latest) — 2022-08-14
- 0.2.0 — 2022-08-13
- 0.1.9 — 2022-08-13
- 0.1.8 — 2022-08-13
- 0.1.7 — 2022-08-13
- 0.1.6 — 2022-08-13
- 0.1.5 — 2022-08-13
- 0.1.4 — 2022-08-13
- 0.1.3 — 2022-08-13
- 0.1.2 — 2022-08-13
- 0.1.0 — 2022-08-13

## README

# Introduction
This project allows users to access an web editor which they can write code in. This editor uses the Ace Editor (https://ace.c9.io/), however it's using the React Extension of it (https://github.com/securingsincity/react-ace)



## Adding custom mode/highlighting/worker to this project
The editor support a custom mode (Dhis2 mode) which assists users in using the DHIS2 API. DHIS2 delivers react components, allowing it's users to access the API
through a declarative approach by using their UseDataQuery & UseDataMutation React components. The usage of these components requires a specific syntax. This editor helps
users follow such syntax by highlighting & error/spell checking. The Mode (DHIS2 mode) assists in usage of the DHIS2 UseDataMutation/UseDataQuery.

#### How to edit the DHIS2 mode
The current DHIS2 mode is hosted in the ace-dhis2 repository. All javascript files related to the mode is under /lib/ace/mode & /lib/ace/mode/dhis2. It consists of the 4 files:
dhis2.js - The "root" file of the mode
dhis2_highlight_rules - The rules for highlightning syntax words.
dhis2_worker - The worker which checks for syntax errors etc
dhis2/dhis2_parse - A precise file specifying how syntax is allowed to be structured.

Check the readme-dhis2.md in that repository for seeing how to modify & test changes to either of these files.


#### How to build the DHIS2 mode
After all changes has been applied & tested, it's time to build it. Check out how to build it in their readme (https://github.com/ajaxorg/ace). 

After building, you'll see the folder ace-builds. We wanna access the acebuilds/src-min-noflict as this is where our build mode is located.

#### How to add the mode to this project
There is already code on how it's added to the project with the imports etc:
import 'ace-builds/src-noconflict/mode-dhis2';
import ace from 'ace-builds/src-noconflict/ace'
// eslint-disable-next-line import/no-webpack-loader-syntax
import dhisWorkerUrl from "!!file-loader!ace-builds/src-noconflict/worker-dhis2";
ace.config.setModuleUrl("ace/mode/dhis2_worker", dhisWorkerUrl);

HOWEVER: The issue is that the /ace-builds/src-nofconflict/dhis2-mode2 & other DHIS2 files inside this folder does not exist. This is because we're accessing /node_modules/ace-builds/src-conflict where
these DHIS2 library files does not exist yet. So the last piece of the puzzle is to move the files we built to this node modules folder. This means we'll have 
/node_modules/ace-builds/src-noconflict/worker-dhis2
/node_modules/ace-builds/src-noconflict/mode-dhis2

And these files will make our syntax work and check for syntax errors based on what we defined earlier. Violla!


See these links regarding how to add the custom worker to the project. This worker does the syntax checking and marks error in the editor if there's syntax errors.
https://github.com/securingsincity/react-ace/issues/725
https://github.com/securingsincity/react-ace/issues/1108

---
_Source: https://npm.io/package/dhis2-query-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._