# ojs-core
> Open source JavaScript library for creating Object-oriented Web user interfaces.
Latest version **1.13.0** (published 2023-10-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install ojs-core
pnpm add ojs-core
yarn add ojs-core
bun add ojs-core
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.13.0 |
| Published | 2023-10-17 |
| First published | 2021-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Maciej Swiechowicz |
| Maintainers | mswiechowicz, kstodolak |
| Keywords | ojs, orangutan, orangutanjs, objectjs |
## Links
- npm: https://www.npmjs.com/package/ojs-core
- Repository: https://github.com/OrangutanJS/ojs-core
- Homepage: https://github.com/OrangutanJS/ojs-core#readme
- Issues: https://github.com/OrangutanJS/ojs-core/issues
- npm.io page: https://npm.io/package/ojs-core
## Dependencies (1)
- [sanitize-html](https://npm.io/package/sanitize-html.md) ^2.11.0
## Alternatives
- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads
## Recent versions
- 1.13.0 (latest) — 2023-10-17
- 1.11.0 (beta) — 2022-01-27
- 1.12.0 — 2023-10-10
- 1.11.5 — 2022-02-02
- 1.11.4 — 2022-02-01
- 1.11.3 — 2022-02-01
- 1.11.2 — 2022-01-27
- 1.11.1 — 2022-01-27
- 1.10.2 — 2022-01-11
- 1.10.1 — 2022-01-08
- 1.10.0 — 2022-01-08
- 1.9.5 — 2022-01-04
- 1.9.4 — 2022-01-04
- 1.9.3 — 2021-12-06
- 1.9.2 — 2021-12-01
- … 19 more at https://npm.io/package/ojs-core/versions
## README
# ojs-core
Open source JavaScript library for creating Object-oriented Web user interfaces.
Core OrangutanJS module.
## Install using npm:
```bash
npm i -D ojs-core
```
### Quick start
##### input:
```js
import o from 'ojs-core';
(...)
o('div').class('section border').id('first_section').add(
o('h1').class('section__header').text('Hello oJS!!'),
o('p').class('section__paragraph').text('This is OrangutanJS.')
]);
```
##### output:
```html
```
#### Render ojs to DOM:
```js
import o, { oRender } from 'ojs-core';
const ojsContent = o('div').class('section border').id('first_section').add(
o('h1').class('section__header').text('Hello oJS!!'),
o('p').class('section__paragraph').text('This is OrangutanJS.')
]);
oRender(
document.body,
ojsContent
);
```
## oJS instance
Before you use *init* method ojs instance is an object that you can work with using various methods.
```js
o('div'); // o{ element: div, (...)}
o('div').init(); //
```
You don't need to use init method when you are using oRender method. oRender would do it on its own.
## oRender
```ts
oRender(parentNode: HTMLElement, childNode: HTMLElement | ojsInstance, cleanParentContent: boolean = false)
```
## oFragment
oFragment is shadowElement where you can add multiple elements without creating unnecessary HTML Element.
```ts
oFragment(children: Array)
```
### Important: You can pass children in Array or just separated by a comma.
#### Example:
```js
import o, { oRender, oFragment } from 'ojs-core';
oRender(
document.body,
oFragment(
o('p').text('p1'),
o('p').text('p2')
)
)
```
#### Result:
```html
p1
p2
```
### .add()
You don't have to pass children elements right away when creating oFragment instance
#### Example:
```js
import o, { oFragment } from 'ojs-core';
const fragment = oFragment();
const paragraphs = ['p1', 'p2'];
fragment.add(
paragraphs.map(paragraph => o('p').text(paragraph))
)
```
### oFragment - .init()
Init method returns Array of all children from instance;
#### Example:
```js
const fragment = oFragment(
o('p').text('p1').init(),
o('p').text('p2').init()
);
fragment.init();
// [
// p1
,
// p2
// ]
```
## oDom
oDom allows to get element from DOM using query selector (css selectors). Returns ojs object.
Returns null in all other cases (element not found or wrong arguments);
```ts
oDom(selector: String, parentNode: DOMElement|ojsInstance = document)
```
- selector - query selector (css selector)
- parentNode - element in the node of which we are looking for wanted element. Default parentNode is *document*.
#### Important - oDom returns always only one element!
#### Example:
```js
import o,{ oDom } from 'ojs-core';
const pElement = oDom('#someParagraph');
pElement.text('new paragraph text set using ojs API');
```
### Dev notes:
#### To run playground:
remove
```"type": "module"```
from ```package.json``` and
```js
npm run dev
```
---
_Source: https://npm.io/package/ojs-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._