The base of Frint
With npm:
$ npm install --save frint
Via unpkg CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
<script src="https://unpkg.com/frint@latest/dist/frint.min.js"></script>
<script>
// available as `window.Frint`
</script>
App: The base for Root App and Widgets.Root App: The top-most parent App, where Widgets get registered to.Widget: Apps that register themselves to Root App.Provider: Dependency for your apps (Root App and Widgets).Let's import the necessary functions from the library first:
const Frint = require('frint');
const { createApp } = Frint;
Now we can create our App:
const RootApp = createApp({ name: 'MyAppName' });
Instantiate the Root app:
const app = new RootApp(); // now you have the Root app's instance
// usually we set the root app to `window.app`,
// so Widgets coming in from separate bundles can register themselves
window.app = app;
const { createApp } = Frint;
const MyWidget = createApp({ name: 'MyWidgetName' });
To register the Widget in your Root App:
window.app.registerWidget(MyWidget);
Providers are dependencies for your Frint application (not to be confused with npm packages).
They can be set at Root app level, at Widget level, or even only at Root app level but cascade them to the Widgets.
For values that are already known:
const RootApp = createApp({
name: 'MyAppName',
providers: [
{
name: 'foo',
useValue: 'foo value here'
}
]
});
const app = new RootApp();
app.get('foo') === 'foo value here';
If you want to get the value from a function (will be called only once during App construction):
const RootApp = createApp({
name: 'MyAppName',
providers: [
{
name: 'bar',
useFactory: function () {
return 'bar value';
}
},
]
});
const app = new RootApp();
app.get('bar') === 'bar value';
You can also have classes defined as providers. They will be instantiated when the App is constructed, and then made available to you:
class Baz {
getValue() {
return 'baz value';
}
}
const RootApp = createApp({
name: 'MyAppName',
providers: [
{
name: 'baz',
useClass: Baz
}
]
});
const app = new RootApp();
app.get('baz').getValue() === 'baz value';
If you wish to cascade a provider from Root App to your Widgets, you can:
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'window',
useValue: window, // the global `window` object
cascade: true,
}
]
});
const MyWidget = createApp({
name: 'MyWidget'
});
const app = new RootApp();
app.registerWidget(MyWidget);
app.get('window') === window;
app.getWidgetInstance('MyWidget').get('window') === window;
app: The current App in scope (Root or Widget)rootApp: Always refers to the top-most App (which is Root)Providers can also list their dependencies (by their names).
class Baz {
constructor({ foo, bar, app }) {
// I have access to both `foo` and `bar` here.
// And I can access the scoped `app` instance too.
}
}
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'foo',
useValue: 'foo value'
},
{
name: 'bar',
useFactory: function ({ foo }) {
return `In bar, I have foo's value: ${foo}`
},
deps: ['foo'] // value's of provider names listed here will be fed as arguments
},
{
name: 'baz',
useClass: Baz,
deps: ['foo', 'bar', 'app']
}
],
})
When cascading providers from Root to Widgets, it is likely you may want to scope those values by the Widget they are targeting. It is applicable in only useFactory and useClass usage, since they generate values.
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'theNameOfTheApp',
useFactory: function ({ app }) {
return app.getOption('name');
},
deps: ['app'],
cascade: true,
scoped: true,
}
]
});
const MyWidget = createApp({
name: 'MyWidget'
});
const app = new RootApp();
app.registerWidget(MyWidget);
app.get('theNameOfTheApp') === 'MyRootApp';
app.getWidgetInstance('MyWidget').get('theNameOfTheApp') === 'MyWidget';
App
The base App class.
Root App and Widget extend this class.
createApp(options)
options (Object)
options.name: (String [required]): Name of your App.options.initialize: (Function [optional]): Called when App is constructed.options.beforeDestroy: (Function [optional]): Called when App is about to be destroyed.options.providers: (Array [optional]): Array of provider objects.App: App class.
const app = new App();
The App instance (either Root App or Widget):
app.getOption(key)
key (String)Any.
app.getOption('name') would give you MyAppName string.
app.getRootApp()
App: Gives you the Root App instance.
app.getParentApp()
App: Gives you the immediate Parent App instance.
app.getParentApps()
Array: Array of parent apps, with immediate parent app as first element and the root app being the last.
app.getProviders()
Gives you an array of provider definitions as passed while creating the App class.
Array.
app.getProvider(name)
Gives you the provider's original definition.
name (String): The name of the provider that you wantObject: The provider definition
Not to be confused with the computed value of the provider.
app.get(name)
Gives you the computed value of the provider.
name (String): The name of the providerAny: The computed value of the provider.
app.getWidgets$(regionName = null)
regionName (String [optional]): Filter the list of widgets by region names if neededObservable: That emits an array of most recent available Widgets.
app.registerWidget(Widget, options = {})
Register Widget class to Root app.
Widget (App): The widget class.options (Object [optional])
name (String [optional]): If the Widget's name needs to be overridden.multi (Boolean [optional]): If the Widget is a multi-instance widget (defaults to false)void
app.hasWidgetInstance(name, region = null, regionKey = null)
Check if Widget instance is available or not.
name (String): The name of the Widget that you are looking forregion (String [optional]): If you want the Widget of a specific regionregionKey (String [optional]): If it is a multi-instance Widget, then the lookup can be scoped by region's keys.Boolean.
app.getWidgetInstance(name, region = null, regionKey = null)
Gets the Widget instance if available.
name (String): The name of the Widget that you are looking forregion (String [optional]): If you want the Widget of a specific regionregionKey (String [optional]): If it is a multi-instance Widget, then the lookup can be scoped by region's keys.App|Boolean: The widget instance, or false if not availble.
app.getWidgetOnceAvailable$(name, region = null, regionKey = null)
Returns an Observable, which emits with the Widget's instance once it is available.
name (String): The name of the Widget that you are looking forregion (String [optional]): If you want the Widget of a specific regionregionKey (String [optional]): If it is a multi-instance Widget, then the lookup can be scoped by region's keys.Observable: Emits the Widget instance once found, only once.
app.instantiateWidget(name, region = null, regionKey = null)
Instantiates the registered Widget class, (for the targetted region/regionKey if it is a multi-instance Widget).
name (String): The name of the Widget that you are looking forregion (String [optional]): If you want the Widget of a specific regionregionKey (String [optional]): If it is a multi-instance Widget, then the lookup can be scoped by region's keys.Array: The updated collection of widgets.
app.destroyWidget(name, region = null, regionKey = null)
Destroys Widget instance.
name (String): The name of the Widget that you are looking forregion (String [optional]): If you want the Widget of a specific regionregionKey (String [optional]): If it is a multi-instance Widget, then the lookup can be scoped by region's keys.void.
FAQs
Core plugin for Frint
The npm package frint receives a total of 238 weekly downloads. As such, frint popularity was classified as not popular.
We found that frint demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.