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>
Root App: The top-most parent App, where other Apps get registered to.App: Apps that register themselves to Root App.Provider: Dependency for your apps.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 apps coming in from separate bundles can register themselves
window.app = app;
const { createApp } = Frint;
const MyApp = createApp({ name: 'MyAppName' });
To register the App in your Root App:
window.app.registerApp(MyApp);
Providers are dependencies for your Frint application (not to be confused with npm packages).
They can be set at Root app level, at App level, or even only at Root app level but cascade them to other Apps.
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 other Apps, you can:
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'window',
useValue: window, // the global `window` object
cascade: true,
}
]
});
const MyApp = createApp({
name: 'MyApp'
});
const app = new RootApp();
app.registerApp(MyApp);
app.get('window') === window;
app.getAppInstance('MyApp').get('window') === window;
app: The current App in scoperootApp: 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 other Apps, it is likely you may want to scope those values by the App 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.app.getName();
},
deps: ['app'],
cascade: true,
scoped: true,
}
]
});
const MyApp = createApp({
name: 'MyApp'
});
const app = new RootApp();
app.registerApp(MyApp);
app.get('theNameOfTheApp') === 'MyRootApp';
app.getAppInstance('MyApp').get('theNameOfTheApp') === 'MyApp';
App
The base App 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
app.getOption(key)
key (String)Any.
app.getOption('name') would give you MyAppName string.
app.getName()
String: The App's name.
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: Array of provider definitions as passed while creating the App class.
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.getApps$(regionName = null)
regionName (String [optional]): Filter the list of apps by region names if neededObservable: That emits an array of most recent available Apps.
app.getWidgets$(regionName = null)
Alias to app.getApps$
app.registerApp(App, options = {})
Register App class to Root app.
App (App): The App class.options (Object [optional])
name (String [optional]): If the App's name needs to be overridden.multi (Boolean [optional]): If the App is a multi-instance app (defaults to false)void
app.registerWidget(App, options = {})
Alias to app.registerApp
app.hasAppInstance(name, region = null, regionKey = null)
Check if App instance is available or not.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.Boolean: A flag indicating whether an App instance whose name matches the provided name parameter is available or not
app.hasWidgetInstance(name, region = null, regionKey = null)
Alias to app.hasAppInstance
app.getAppInstance(name, region = null, regionKey = null)
Gets the App instance if available.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.App|Boolean: The app instance, or false if not availble.
app.getWidgetInstance(name, region = null, regionKey = null)
Alias to app.getAppInstance
app.getAppOnceAvailable$(name, region = null, regionKey = null)
Returns an Observable, which emits with the App's instance once it is available.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.Observable: Emits the App instance once found, only once.
app.getWidgetOnceAvailable$(name, region = null, regionKey = null)
Alias to app.getAppOnceAvailable$
app.instantiateApp(name, region = null, regionKey = null)
Instantiates the registered App class, (for the targetted region/regionKey if it is a multi-instance App).
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.Array: The updated collection of apps.
app.instantiateWidget(name, region = null, regionKey = null)
Alias to app.instantiateApp
app.destroyApp(name, region = null, regionKey = null)
Destroys App instance.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.void.
app.destroyWidget(name, region = null, regionKey = null)
Alias to app.destroyApp
FAQs
Core plugin for Frint
The npm package frint receives a total of 0 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.