<commit_before># core

> Core plugin of Frint

## Terminologies

* `App`: The base for Core and Widgets.
* `Core`: The root app, that renders to DOM directly.
* `Widget`: Apps that register themselves to Core.
* `Provider`: Dependency for your apps (Core and Widgets).

## Usage

Let's import the necessary functions from the library first:

```js
const Frint = require('frint');
const { createCore, createWidget } = Frint;
```

Now we can create our classes:

```js
const CoreApp = createCore({ name: 'MyAppName' });
const MyWidget = createWidget({ name: 'MyWidgetName' });
```

Instantiate the Core app:

```js
const app = new CoreApp(); // now you have the Core app's instance

// usually we set the core app to `window.app`,
// so Widgets coming in from separate bundles can register themselves
window.app = app;
```

To register the Widget:

```js
app.registerWidget(MyWidget);
```

### Providers

Providers are dependencies for your Frint application (not to be confused with `npm` packages).

They can be set at Core app level, at Widget level, or even only at Core app level but cascade them to the Widgets.

#### Direct values

For values that are already known:

```js
const CoreApp = createCore({
  name: 'MyAppName',
  providers: {
    name: 'foo',
    useValue: 'foo value here'
  }
});

const app = new CoreApp();
app.get('foo') === 'foo value here';
```

#### Values from factories

If you want to get the value from a function (will be called only once during App construction):

```js
const CoreApp = createCore({
  name: 'MyAppName',
  providers: {
    name: 'bar',
    useFactory: function () {
      return 'bar value';
    }
  },
});

const app = new CoreApp();
app.get('bar') === 'bar value';
```

#### Classes

You can also have classes defined as providers. They will be instantiated when the App is constructed, and then made available to you:

```js
class Baz {
  getValue() {
    return 'baz value';
  }
}

const CoreApp = createCore({
  name: 'MyAppName',
  providers: {
    name: 'baz',
    useClass: Baz
  }
});

const app = new CoreApp();
app.get('baz').getValue() === 'baz value';
```

#### Cascading

If you wish to cascade a provider from Core App to your Widgets, you can:

```js
const CoreApp = createCore({
  name: 'MyCoreApp',
  providers: [
    {<commit_msg>docs: provider examples with array.<commit_after># core

> Core plugin of Frint

## Terminologies

* `App`: The base for Core and Widgets.
* `Core`: The root app, that renders to DOM directly.
* `Widget`: Apps that register themselves to Core.
* `Provider`: Dependency for your apps (Core and Widgets).

## Usage

Let's import the necessary functions from the library first:

```js
const Frint = require('frint');
const { createCore, createWidget } = Frint;
```

Now we can create our classes:

```js
const CoreApp = createCore({ name: 'MyAppName' });
const MyWidget = createWidget({ name: 'MyWidgetName' });
```

Instantiate the Core app:

```js
const app = new CoreApp(); // now you have the Core app's instance

// usually we set the core app to `window.app`,
// so Widgets coming in from separate bundles can register themselves
window.app = app;
```

To register the Widget:

```js
app.registerWidget(MyWidget);
```

### Providers

Providers are dependencies for your Frint application (not to be confused with `npm` packages).

They can be set at Core app level, at Widget level, or even only at Core app level but cascade them to the Widgets.

#### Direct values

For values that are already known:

```js
const CoreApp = createCore({
  name: 'MyAppName',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here'
    }
  ]
});

const app = new CoreApp();
app.get('foo') === 'foo value here';
```

#### Values from factories

If you want to get the value from a function (will be called only once during App construction):

```js
const CoreApp = createCore({
  name: 'MyAppName',
  providers: [
    {
      name: 'bar',
      useFactory: function () {
        return 'bar value';
      }
    },
  ]
});

const app = new CoreApp();
app.get('bar') === 'bar value';
```

#### Classes

You can also have classes defined as providers. They will be instantiated when the App is constructed, and then made available to you:

```js
class Baz {
  getValue() {
    return 'baz value';
  }
}

const CoreApp = createCore({
  name: 'MyAppName',
  providers: [
    {
      name: 'baz',
      useClass: Baz
    }
  ]
});

const app = new CoreApp();
app.get('baz').getValue() === 'baz value';
```

#### Cascading

If you wish to cascade a provider from Core App to your Widgets, you can:

```js
const CoreApp = createCore({
  name: 'MyCoreApp',
  providers: [
    {
{'fraction_non_alphanumeric': 0.13024850042844902, 'fraction_numerical': 0.0, 'mean_word_length': 3.6596806387225547, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7086252', 'n_tokens_mistral': 1492, 'n_tokens_neox': 1433, 'n_words': 596}