Skeleton Plugin / Module Not found Issue after build - aurelia

I created a plugin and I uploaded to NPM by using this skeleton. When I try to use it the module is not found:
import 'aurelia-virtual-scroll';
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-virtual-scroll');
My plugin index.js file looks like below:
export function configure(config) {
config.globalResources('./aurelia-virtual-scroll');
}
In the same folder I have that aurelia-virtual-scroll.js file.
The error I display is the one below:
Error: Cannot find module './aurelia-virtual-scroll/aurelia-virtual-scroll'.
at webpackContextResolve....
Should this happen? Am I missing something?
Here is my base code for the plugin.
And here is the skeleton for webpack where I am trying to use it

your class needs to be imported/exported in the index and you don't need to import it in the main file.
import { PLATFORM } from 'aurelia-pal';
export { AureliaVirtualScroll } from './aurelia-virtual-scroll';
export function configure(config) {
config.globalResources(PLATFORM.moduleName('./aurelia-virtual-scroll'));
}

Related

How to mock NativeModules in react-native project by js side?

I am working on runnning my react-native app with expo, the problem I am facing is to mock the NativeModules exported by "react-native", my current solution is using babel-plugin-module-resolver plugin to redirect the "react-native" module to my "react-native-proxy" module, which exports a proxy object that expanding NativeModules.
Everything goes well untill I want to use expo-file-system to mock our native FileSystem api, expo-file-system is an es module, an error look like caused by module mixed use occured. I tried import * as FileSystem from 'expo-file-system'; in babe.config.js, "react-native-proxy" module, metro.config.js, both throwed an error.
How could I require an es module in babel.config.js or babel-plugin?
Or any idea of achieving the target mentioned above?
Thanks.
Solved by myself.
As I know that, the NativeModules object exported from "react-native" is created in Libraries/BatchedBridge/NativeModules.js, so I change my mock target to this file. I create a file name "NativeModulesProxy.js" which content copied from "Libraries/BatchedBridge/NativeModules.js", then use babel-plugin-module-resolver plugin to redirect the src file to this one.
// babel.config.js
const resolvePath = require('babel-plugin-module-resolver').resolvePath;
const path = require('path');
...
plugins: [
[
'module-resolver',
{
resolvePath(sourcePath, currentFile, opts) {
if (sourcePath.includes('NativeModules')) {
const sourceAbsolutePath = path.resolve(path.dirname(currentFile), sourcePath);
if (sourceAbsolutePath.endsWith('node_modules/react-native/Libraries/BatchedBridge/NativeModules')) {
return path.resolve(__dirname, 'NativeModulesProxy');
}
}
return resolvePath(sourcePath, currentFile, opts);
}
}
]
],
...
NativeModules object is a quote of global.nativeModuleProxy, base on this, I could create my own proxy object like "global.myNativeModuleProxy" which combines global.nativeModuleProxy and my mock native modules.

Can't import #fullcalendar in vue.js

import FullCalendar from '#fullcalendar/vue'
throws
../../ullcalendar/vue in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],["babel-plugin-root-import",{"rootPathPrefix":"#","rootPathSuffix":"./resources/assets/js"}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/views/main/Dashboard.vue
Try '#/fullcalendar/vue' you need the have slash / after the # you can even do ../fullcalendar/vue or ./fullcalendar/vue depends on where your file is located. If that doesn't solve the problem check your package json if you have downloaded the fullcalendar and put the FullCalender into the components. But first look if you have installed the fullcalendar if not the a npm install once again.
export default {
components: {
FullCalendar
}
}

How to define entry point for react native app

I'm just getting started with react native and have created a base app with create-react-native-app.
I did some restructuring and made a few new folders and renamed the App.js to Home.js. I modified the app.json to contain an entry point that references the new Home.js file. When I load the app, nothing happens. There's no error, it just stays on the expo screen.
.
-components
-screens
-Home
Home.js
-config
-node_modules
-tests
app.json
app.json file:
{
"expo": {
"sdkVersion" : "23.0.0",
"entryPoint" : "./screens/Home/Home.js"
}
}
How do you define the entry point of the app?
if you are using Expo, you have to specify the entrypoint in your app.json file like this:
{
"expo": {
"entryPoint": "./src/app/index.js"
}
}
then, inside that file you need to register the app with Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT)
import Expo from 'expo'
...
class App extends Component {
...
}
export default Expo.registerRootComponent(App);
this way you can add your entry file wherever you want.
You need to update the app.json so that the entryPoint is the new path to the App.js.
{
"expo": {
"entryPoint": "./src/App.js",
...
}
}
However using Expo.registerRootComponent(App) causes the following error in SDK 32:
undefined is not an object (evaluating '_expo.default.registerRootComponent')
It can be fixed by importing registerRootComponent explicitly, rather than trying to access it via Expo.registerRootComponent.
Here is a sample App.js.
import { registerRootComponent } from 'expo';
class App extends React.Component {
...
}
export default registerRootComponent(App);
For Expo Projects
According to the current Expo documentation, if you want a different entry point than the App.js file, you can update the package.json - add a main field with the path to the desired entry point. Then inside the entry point file you'll have to also have to register the root component of the app. Expo was doing this automatically, when the entry point wasn't specified and was the App.js file
package.json
{
"main": "my/customEntry.js"
}
entryPointFile.js
import { registerRootComponent } from 'expo';
import MyRootComponent from './MyRoot';
registerRootComponent(MyRootComponent);
What if I want to name my main app file something other than App.js? - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
If your project is in managed workflow setup (the default one), as stated in the doc, you must import the registerRootComponent and call it with your root component as argument, in the file you wish to be the main one:
import { registerRootComponent } from 'expo';
const AnyName() { ... } // Your root component
registerRootComponent(AnyName)
And then, in your package.json file, change the "main" to this file relative path, like
{
"main": "src/main.js"
}
I created project by react-native-script. In default entrypoint of app (App.js), you export App which import from your entry.
- node_modules
- App.js
- build
- main.js
File App.js:
import App from './build/main'
export default App
I also prefer to put all sources in a separated folder, for instance src/, and I found a different solution:
in my package.json, generated by expo cli, I see that main attribute is node_modules/expo/AppEntry.js.
I copied node_modules/expo/AppEntry.js to src/expoAppEntry.js and just changed the App import to import App from './App'; so it points to my *src/App.tsx`
then of course I changed the package.json main attribute to src/expoAppEntry.js.
See a working example here https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js
For those who are using Expo with typescript, you dont have to add .tsx at the end of the entrypoint in app.json. For example your entrypoint can be:
{
"expo": {
"entryPoint": "./app/components/AppEntryPoint/App.component",
"name": "Sample App",
...
}
...
}
In this example the name of entrypoint component is App.Component.tsx. But not mentioning the extension will also work. Apart from this, in the root component, writing export default registerRootComponent(AppComponent) or registerRootComponent(AppComponent) both should work as exporting a component from a file only means that other files can use it as well. Not writing it should not be an issue here because we have mentioned in app.json that this is the root component. App.json will look up and start building the structure of the app from there itself.
The entry point can be found in node_modules/expo/AppEntry.js..
This is in Expo Typescript...
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import App from '../../src/App';
registerRootComponent(App);
In this you can change your entry point. Initially it is set to App, Look the import statement where that component is coming from.

Organize by folder in Aurelia

I want a folder structure like so:
src/energy/
-- energy.ts
-- energy.html
-- energyDataApi
-- more files...
How do you set this up in Aurelia?
I've tried the feature setup: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/6, but keep getting a 404 on http://localhost:5000/dist/energy.js. I'm using ASP.Net Core, TypeScript, SystemJs, Gulp from the https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-aspnetcore example.
main.ts
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('energy');
index.ts
export function configure(config) {
config.globalResources(['./energy']);
}

How to use installed modules in aurelia

I am using the skeleton-typescript sample and work through the documentation. I am trying to set up a value converter with numeral as it is shown in the docs.
import numeral from 'numeral';
export class CurrencyFormatValueConverter {
toView(value) {
return numeral(value).format('($0,0.00)');
}
}
I have installed numeral via jspm install numeral. It is added package.json within the jspm dependencies and I manually added it to bundles.js.
After saving the typescript file I get the error: Cannot find module 'numeral'.. What am I missing?
You need d.ts for numeral.js. and since there is no d.ts on Typings this can resolve problem:
$ jspm install npm:#types/numeral.
It works in my skeleton with value converters. Import can be done like import * as numeral from 'numeral';
You should add it in your configuration like:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('numeral');
aurelia.start().then(() => aurelia.setRoot());
}
You will find the exact package names in your package.json:
jspm": {
"dependencies": {
...
"numeral": "xxxx"
...
}
}