open-index/open-npm huggingface dataset:
npm package: @geooot/soul-patch
Description: Generating HTML through means that are not efficient, or safe. But it gets the job done. (and just want's to have a good time!)
Author: geooot
Latest version: 1.1.0

# soul-patch
A HTML templator with angular like syntax. Generating HTML through means that are not efficient, or safe. Only really good for shady static site generation.

If moustache and handlebars are real templating engines, then soul-patch is it's wierd distant cousin.

## Installation
```bash
$ npm install @geooot/soul-patch
```

## Usage
```javascript
const { renderPage } = require('@geooot/soul-patch');
const template = `
    <ul sp-for="let i=0; i<3; i++">
        <li sp-assign="text: foo + someFunc(i), class: 'whatever'"></li>
    </ul>
`
let rendered = await renderPage({
    input: template,
    props: {
        foo: "The number is: ",
        someFunc: (num) => num * 100
    }
});

console.log(rendered);
// Results in:
// <ul>
//     <li class="whatever">The number is: 0</li>
//     <li class="whatever">The number is: 100</li>
//     <li class="whatever">The number is: 200</li>
// </ul>
```

## Operators
Operators allow you to template html by adding special attributes to your HTML. Here are the available operators:

### `sp-assign`
This property allows you to assign variables to HTML attributes and set HTML.
    
#### Example 1

This template:
```html
<p sp-assign="text: someVariable, class: someBool ? 'text-green' : 'text-red'">Whatever</p>
```
Results in:
```html
<p class="text-red">I was a string assigned to someVariable</p>
```

#### Example 2: Using innerHTML
This template:
```html
<p sp-assign="innerHTML: markdownToHTML(markdownInAString)"></p>
```
Results in:
```html
<p><h1>Here is some raw HTML being injected!!!</h1><p>wowzers</p></p>
```

### `sp-for`
Defines how you can create a loop of elements. 

#### Example 1: For loop
This template:
```html
<ul sp-for="let i=0; i<10; i++">
  <li sp-assign="text: i, class: 'whatever'">
    Anything can go here but it will probably be replaced on render
  </li>
</ul>
```
Results in:
```html
<ul>
  <li class="whatever">0</li> 
  <li class="whatever">1</li> 
  <li class="whatever">2</li> 
  <li class="whatever">3</li> 
  <li class="whatever">4</li> 
  <li class="whatever">5</li> 
  <li class="whatever">6</li> 
  <li class="whatever">7</li> 
  <li class="whatever">8</li> 
  <li class="whatever">9</li> 
</ul>
```

#### Example 2: For each loop
This template
```html
<div sp-for="item of listOfObjects">
  <p sp-assign="text: item.name, id: item.id">Whatever</p>
</div>
```
Results in
```html
<div>
  <p id="someIdFoo">Foo</p>
  <p id="someIdBar">Bar</p>
  <p id="someIdWiz">Wiz</p>
</div>
```

### `sp-render-if`
Renders an item if a certain condition is true

#### Example
This template:
```html
<p sp-render-if="10 < 100">Turns out 10 is less than 100 so this will render</p>
<p sp-render-if="myIQ > averageIQForAge(19)">But my IQ is below average so this will not render</p>
```

Results in:
```html
<p>Turns out 10 is less than 100 so this will render</p>
```
npm package: @geoportallux/3dviewer-plugin-create-link
Description: Plugin to copy app state to URL and shorten the url.
Author: Camptocamp
Latest version: 1.0.0-alpha

# @vcmap/create-link

> Part of the [VC Map Project](https://github.com/virtualcitySYSTEMS/map-ui)

This plugin provides a share menu entry to copy the apps
current state as a URL to your clipboard. This includes a fallback
for browsers which do not support the clipboard API. This plugin
has no configuration.
npm package: @geoportallux/lux-3dviewer-plugin-back-to-2d-portal
Description: A plugin that adds a 2D button and a button to 3D print in the toolbar to navigate back to the 2D geoportal
Author: c2c
Latest version: 1.2.2

# 3dviewer-back2D

> Part of the [VC Map Project](https://github.com/virtualcitySYSTEMS/map-ui)

This plugin adds a button to the top toolbar, enabling users to open the 2D Geoportal in a new browser tab. If the 2D Geoportal is already open, the plugin will refresh the existing tab instead of creating a duplicate.

Additionally, the plugin automatically synchronizes the current map coordinates (X, Y) and zoom level, ensuring the 2D Geoportal centers on the same location as the 3D viewer.

## Development

To further develop the plugin run: `npm start`

## Optional parameters

- `pathTo2dGeoportal` - The 2D Geoportal url, default to `"http://localhost:5173/theme/main"` to point the local instance, but could be `"https://map.geoportail.lu/theme/main"` for prod.
- `tabId` - The tab id where to open the 2D Geoportal, default to `"lux2d"`.

## Deploy plugin within map-ui

- Add plugin dependency in desired version to `plugins/package.json`:

```
"dependencies": {
  ...
  "@geoportallux/lux-3dviewer-plugin-back-to-2d-portal": "...",
  ...
```

- Add plugin with desired values to map-ui module configuration:

```js
    {
      "name": "@geoportallux/lux-3dviewer-plugin-back-to-2d-portal",
      "entry": "plugins/@geoportallux/lux-3dviewer-plugin-back-to-2d-portal/index.js",
      "pathTo2dGeoportal": "...",
      "tabId": "lux2d",
      "pathToPrintPortal": "...", // If empty, won't display the button to 3D print portal
      "tabIdPrint": "luxprint"
    },
```

⚠️ WARNING: `LUREF EPSG 2169` must be defined in global viewer config (`lux.config.json`).

## Build the npm package

Use the following commands to increase the version and push a new tag, which builds a new version as npm package:

```shell
npm version 1.0.0 --no-git-tag-version
git add .
git commit -m "1.0.0"
git tag v1.0.0
git push origin main v1.0.0 # replace "origin" with your remote repo name

```
npm package: @geoportallux/lux-3dviewer-plugin-create-link
Description: Plugin to copy app state to URL and shorten the url.
Author: Camptocamp
Latest version: 1.0.0

# @geoportallux/lux-3dviewer-plugin-create-link

This plugin is a fork of `@vcmap/create-link`.

This plugin provides a share menu entry to copy the apps
current state as a URL to your clipboard. This includes a fallback
for browsers which do not support the clipboard API.

This version adds a call to a url shortener api before copying the url into the clipboard.

## Optional parameters

- `pathToUrlShortenerApi` The full path to the url shortener (eg. `https://myportal.io/short/create`)

## Deploy plugin within map-ui

- Add plugin dependency in desired version to `plugins/package.json`

```
"dependencies": {
  ...
  "@geoportallux/lux-3dviewer-plugin-create-link": "^1.0.0-alpha",
  ...
```

- Add plugin with desired values to map-ui module configuration:

```
{
    "name": "@geoportallux/lux-3dviewer-plugin-create-link",
    "entry": "plugins/@geoportallux/lux-3dviewer-plugin-create-link/index.js",
    "pathToUrlShortenerApi": "..."
},
```
npm package: @geops/create-react-web-component
Description: Create a web-component from a React component.
Author: geOps AG
Latest version: 3.0.5

# Create React Web Component

[![NPM Version](https://img.shields.io/npm/v/@geops/create-react-web-component.svg)](https://www.npmjs.com/package/@geops/create-react-web-component)
[![Github License](https://img.shields.io/github/license/Silind/create-react-web-component)](https://github.com/Silind-Software/create-react-web-component/blob/master/LICENSE)
![Build Status](https://github.com/oterral/create-react-web-component/workflows/build/badge.svg)

This project is a fork of the archived but great [SimonHoiberg/create-react-web-component](https://github.com/SimonHoiberg/create-react-web-component).

It includes the React 18 support and removed all cli and styled stuff.

## How to use it

In your project:

```console
yarn add @geops/create-react-web-component
```

Creates the web-component using your React component:

```js
import ReactWebComponent from "@geops/create-react-web-component";
import MyReactComponent from "./MyReactComponent";

const attributes = {
  string: "default value",
}

const properties = {
  object: { "key": "value"}
  array: ["foo"]
}

ReactWebComponent.setAttributes(attributes);
ReactWebComponent.setProperties(properties);
ReactWebComponent.render(MyReactComponent, "my-web-component", { shadow: false });
```

Then load your module in a HTML page

```html
<html>
  <head>
    <script type="text/javascript" src="your module bundle file"> </script>
  </head>
  <body>
    <my-web-component id="myWebComponent" string="foo"></my-web-component>
    <script>
      const elt = doucment.getElementById('myWebComponent');

      console.log(elt.string); // --> "foo"
      console.log(elt.object); // --> "{ "key": "value" }"
      console.log(elt.array); // --> "['foo']"
    </script>
  </body>
</html>
```

## Contributing

### Getting Started

```console
yarn install
yarn test
```

### Issuess

In the case of a bug report, bugfix or a suggestions, please feel very free to open an issue.

### Pull request

Pull requests are always welcome, and I'll do my best to do reviews as fast as I can.

## License

This project is licensed under the [MIT License](https://github.com/geops/create-react-web-component/blob/master/LICENSE)

## Get Help

Read more about using Web Components with React on the [official React Docs](https://reactjs.org/docs/web-components.html)

- If appropriate, [open an issue](https://github.com/geops/create-react-web-component/issues/new) on GitHub