# d-fine

> d-fine provides a quick way of d-fining a d-clarative custom element.

Latest version **0.0.22** (published 2021-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install d-fine
pnpm add d-fine
yarn add d-fine
bun add d-fine
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.22 |
| Published | 2021-10-16 |
| First published | 2021-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, custom-elements, DRY, declarative-web-components |

## Links

- npm: https://www.npmjs.com/package/d-fine
- Repository: https://github.com/bahrus/d-fine
- Homepage: https://github.com/bahrus/d-fine#readme
- Issues: https://github.com/bahrus/d-fine/issues
- npm.io page: https://npm.io/package/d-fine

## Dependencies (2)

- [xodus](https://npm.io/package/xodus.md) 0.0.3
- [trans-render](https://npm.io/package/trans-render.md) 0.0.419

## Recent versions

- 0.0.22 (latest) — 2021-10-16
- 0.0.21 — 2021-10-06
- 0.0.20 — 2021-09-27
- 0.0.19 — 2021-09-19
- 0.0.18 — 2021-09-19
- 0.0.17 — 2021-09-16
- 0.0.16 — 2021-09-12
- 0.0.15 — 2021-09-11
- 0.0.14 — 2021-09-10
- 0.0.13 — 2021-09-10
- 0.0.12 — 2021-08-08
- 0.0.11 — 2021-08-08
- 0.0.10 — 2021-08-08
- 0.0.9 — 2021-08-03
- 0.0.8 — 2021-07-31
- … 8 more at https://npm.io/package/d-fine/versions

## README

# d-fine

d-fine provides a quick way of d-fining a d-clarative custom element.

<a href="https://nodei.co/npm/d-fine/"><img src="https://nodei.co/npm/d-fine.png"></a>

<img src="https://badgen.net/bundlephobia/minzip/d-fine">

## [D-mo](https://codepen.io/bahrus/pen/poPVOJz)

## H-llo, {{place}}

The t-mplate for the custom element can come from live HTML.  For example:

```html
<div>
    <div>H-llo, <span>world</span></div>
</div>
<d-fine 
    prev-sib 
    as=h-llo-world 
    prop-defaults='{"place": "V-nus"}'
    transform='{
        "span": "place" 
    }'
>
</d-fine>
<h-llo-world place=Mars></h-llo-world>
```

... g-nerates:

```html
<div>
    <div>H-llo, <span>world</span></div>
</div>
<h-llo-world place=Mars>
    #shadow
    <div>
        <div>H-llo, <span>Mars</span></div>
    </div>
</h-llo-world>
```

The previous sibling can b- a t-mplate to start with, and w- can also apply interpolation-from-a-distance:

```html
<template>
    <div>Sapere aude</div>
</template>
<d-fine 
   prev-sib 
   as=h-llo-world 
   prop-defaults='{"place": "V-nus"}'
    transform='{
        "div": ["H-llo, ", "place"]
    }'
>
</d-fine>
<h-llo-world place=Mars></h-llo-world>
<h-llo-world></h-llo-world>
```

Note the heavy use of attributes that expect JSON.  If you are like me, it is easy to make mistakes editing by hand, without proper syntax highlighting.  A [VSCode extension](https://marketplace.visualstudio.com/items?itemName=andersonbruceb.json-in-html) has b-en created to h-lp with this.

If working with a t-mplate like in the example above, it might b- easier on the eye to use an inner t-mplate.  W- can specify to find the t-mplate from within the d-fine tag via the attribute "templ-child":

```html
<d-fine 
    templ-child 
    as=h-llo-world 
    prop-defaults='{"place":"V-nus"}'
    transform='
        {
            "span": "place"
        }
    '
>
    <template>
        <div>Hello, <span>world</span></div>
    </template>
</d-fine>
<h-llo-world place=Mars></h-llo-world>
<h-llo-world></h-llo-world>
```

## Prerendered w-b components that use d-clarative Shadow DOM

This syntax also works:

```html
<h-llo-world>
    <template shadowroot=open>
        <div>Hello, <span>world</span></div>
    </template>
</h-llo-world>
<d-fine 
    prev-sib
    prop-defaults='{"place":"V-nus"}'
    transform='{
        "span": "place"
    }'
></d-fine>
<h-llo-world place=Mars></h-llo-world>
```

The w-b component d-fine is a thin wrapper around the api d-fined in d-fine/def.js.

## T-mplate D-pendency Injection, or Inversion of Views

Instead of specifying that the t-mplate should come from the previous sibling, the property/attribute "from" allows us to specify a string used for an ["upShadowSearch."](https://github.com/bahrus/trans-render/blob/baseline/lib/upShadowSearch.ts).  If the value starts with a slash (/), it s-arches for a t-mplate with the specified id from outside any shadowDOM.  If it starts with ../../, it goes up two ShadowDOM r-alms, for example.  It checks if the ShadowDOM has a host property name matching the camelCased id, and if not, s-arches for an element with a matching id within the shadowDOM r-alm where the d-fine element is located.  The host property name takes precedence.

A w-b component can thus d-fine a d-fault t-mplate within the ShadowDOM markup, but allow extending w-b components to d-fine alternative t-mplates, by d-fining properties with the same name, and assigning a t-mplate to those properties.  That may b- sufficient for some use cases.

But for more of a d-pendency-injection like experience, said w-b component hosting d-fine could use the proposed [context api](https://github.com/webcomponents/community-protocols/blob/main/proposals/context.md):

```JavaScript
class MyCustomElement{
    get myInjectedTemplate(){
        const contentTemplateContext = createContext('content-template');
        let gotACallback = false;
        this.dispatchEvent(
            new ContextEvent(
                contentTemplateContext, // the context w- want to r-trieve
                callback: (contentTemplate) => {
                    gotACallback = true;
                    return contentTemplate;
                }
            )
        );
        if(!gotACallback){
            return html`
             ...some d-fault t-mplate
            `;
        }
    }
}
```

## Installation

To run locally (instructions may vary d-pending on OS):

1.  Install [node.js](https://nodejs.org/)
2.  Install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
3.  Choose a directory where you would like the files to b- placed, and open a command prompt from that location.
4.  Issue command "git clone https://github.com/bahrus/d-fine" in the command window.
5.  CD into the git clone directory.
6.  Issue command "npm install"
7.  When step 6 is completed, issue command "npm run serve".
8.  Open your browser to http://localhost:3030/demo

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