Are there any naming conventions for filenames? - nativescript

I'm new to nativescript and tried to open a modal.
Everything works fine if I use a filename like "connect-modal-page".
But if I use "connect" only I get the message:
JS ERROR Error: NativeScript encountered a fatal error: Error: Failed to load component from module: ./views/modals/connect.xml
So I guess there is something like a naming convention. But which?
The docs says there isn't any real convention.
Did I miss something?
This filename works:
connect-modal-page.xml
These filenames do not work:
connect-modal.xml
connect.xml

You are using NativeScript and bundling with Webpack (with the upcoming version this will be the default workflow). The thing is that Webpack needs to "know" about any resources that need to be bundled.
So to resolve this issue by design the NativeScript team has provided a pattern that will automatically bundle all pages that are ending with -page or -root. Any other resource that you want to become part of the bundle should be explicitly included in the webpack.config.js file (in the CopyWebpackPlugin section). So with NativeScript 5.x.x you will need to either rename all your files to end with -page or to add them explicitly in the webpack configuration. Note that I am talking about a project for NativeScript Core (plain JavaScript or TypeScript) and not NativeScript Angular.
From NativeScript 6 (upcoming release expected in mid-July2019) this won't be needed anymore and all *.xml and *.ts resources (talking about NativeScript Core) will be bundled by default.

Related

Importing only the flags which I'm using in my app (flag-icons library). How importing from CDN works?

I've recently come across a way of importing font awesome icons which would allow the creation of a final bundle with only the icons in use FontAwesome documentation. I understand that the bundler (Vite in my case) applies tree shaking in order to create a smaller bundle.
I'm currently in the midst of developing an app that also uses flags. Thus I stumbled upon the following repository Flag Icons. I've installed the npm package and added the stylesheet to index.html. Everything works as expected.
Does using the library this way mean I imported all the flags in my project, even the ones I won't use? Is there a way I can create a smaller bundle with the ones I'm going to use?

How to figure it out on which mistake i made when i run npm run build?

I'm quite new to this VueJS things. And this is my first App creating a SPA with separated server-side app. I faced the problem right before deploying my app on a shared hosting. Simply, when i run "npm run build", it return with an error in which i don't even know the cause. Here is the error i faced.
first img
second img
Please help me resolve this issues, i know there are jquery errors, but i think those are not the problems
You have es-lint checker. It checks unused vars so you have unused variables inside these listed components like from and to. You should remove these variable from your components.
Those errors come from your linter (probably eslint) which is a tool designed to ensure consistence and code quality : in your case it mainly complains about declared variables that are not used anywhere else in your code and $ being undefined (I guess you're trying to use jquery which you should not be doing in a vue project anyway)
On the images you posted you have all necessary infos : the title of each block tells you in which file the error is (for example App.vue in the first image) and then you have line/column to locate precisely where you need to adjust :)
Note that you can configure your linter (what should be error/warning/skipped out) overwriting (or creating if it doesn't exist) a config file at the root of your project (if you use eslint for example, you can create a .eslintrc file). See the config part of the official doc

Sass not working in Svelte and StorybookJS

I am using Google Material on Svelte and thank GOD finally was able to successfully make it work. Now, I created it in a separate code base. On the other hand I am actually creating a separate codebase for different components in StorybookJS. So when I ported my working codebase (actually copy pasted the component) the button for example that I am testing is not working anymore. I checked all the necessary npm installations that I need and it's all good.
But now when I check the Developer Tools on my browser (I am using Brave) I got this error:
Refused to apply style from 'http://localhost:60809/theme-mui.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
My theme-mui.scss mentioned on the error above is the initializer for my Google Material to work on Svelte (or other framework for that matter). I tried to transfer the above scss file to no avail. I followed the instruction of setup from my separate code base but it still is not working. I tried to follow the sass config using this link from Storybook but still to no avail. What could have gone wrong?

Using Angular libraries in Nativescript code sharing project

I'm trying to migrate an Angular app to a shared codebase with Nativescript using the new #nativescript/schematics, however, I'm having problems importing my Angular library when building the mobile version of the app. I used the angular-cli to create the library (ng generate library).
For the web version, all I had to do was build the library separately using ng build library-name which then allowed me to import it into the main application.
How can I build a mobile version of the library that can be imported into the main application when running tns run ios --bundle? I've already migrated the components and module of the library with appropriate *.tns files.
Any help is appreciated
I had the same problem. Nativescript cli do not have this feature where we can build an angular library into npm package and use it in other projects.
I tried a workaround and it worked for me. Write a script to copy all of your project files into another directory and replace all *.tns.ts, *tns.html and *.tns.scss. files with *.ts, *.html and *.scss respectively. Then build these files using regular ng command. You can add a build configuration for the same in angular.json file to build from the copied directory. I hope it helps.
I'm sorry this is just a hyperlink answer but the space required to answer this, in my opinion, is way too large. I just finished finalizing a repo I've been working on to do exactly this. I have a whole slew of angular web libraries that I now want to make available for use on mobile using NativeScript. I have put everything I have learned so far into this repo and I hope it helps you too.
Thanks for the final push/idea #Rohit, a script for doing what he suggests is in the test-lib/gulpfile.js of this repo.

Using Babel in Production - How to precompile scripts

I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine

Resources