We Keep Coding

How to add javascript header to node js built index.html

So I'm trying to make a working React app into a Twitch Extension (I don't need any twitch integration).
The only thing to make it work with Twitch's iframes is add a tag in the html file
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
And another call of javascript code on startup that uses stuff from that twitch-ext.min.js file
window.Twitch.ext.onAuthorized(function(auth) {
console.log('The JWT that will be passed to the EBS is', auth.token);
console.log('The channel ID is', auth.channelId);
});
What im currently doing is running npm build then manually editing the generated index.html and main.xxxxx.js to include those lines of code in the optimized minified files. This obviously seems a bit inefficient and I feel like there must be a way to tell node that during build it should include these lines. So is what I'm asking possible?

So I got an answer from someone who knew about Node. What you do is edit the index.html and index.js file that your react app should have.
The npm run build actually uses those 2 files to generate the minified built files so I just added
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
to index.htmla
and my
window.Twitch.ext.onAuthorized()
call in the index.js file and it all worked.
You can find index.html in the public folder of your react project if you used npx create-react-app. And index.js is in the src folder.

How to use a capacitor plugin meant to be imported in a vanilla js app

I'm currently pulling hairs trying to figure out how to go about this.
So, I'm working in a vanilla JS environment with no webpack setup served with capacitor and want to use this capacitor-plugin: https://github.com/CodetrixStudio/CapacitorGoogleAuth
However, to use this plugin I have to import the package into my client code.
Here's what I've tried:
Unpkg type="module": however browser support in mobile isn't that great. And this app will be served to a ton of users
Using browserify + esmify to bundle the plugins code into something I could import with a <script> tag into my index.html. Didn't work
My last thought is to setup webpack to bundle everything for me, similar to the browserify approach and import that. However before I go through with all of that I wanted to reach out here to see if you guys had any other ideas.
Is there a way to access this plugin from window maybe?

so I figured out the way to go about this by following this article: https://medium.com/#SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d
Basically you have a www/js directory (vanilla js), and a src directory (ES6/import code goes). You then configure webpack to output in your www/js/ directory.
Note: Any variable you want accessible to your vanilla js code must be explicitly stored in the window object.
Example
./src/toBeWebpacked.js
import Module from "your-module"
window.doSomething = () => Module.doSomething()
./www/js/vanilla.js
const useModuleCode = () => {
// use code from webpacked ES6 JavaScript here
return window.doSomething();
}

How to use the js library bowser?

I want to use the js library bowser in an asp.net project which uses TypeScript and the bundling/minification features that exists in the namespace System.Web.Optimization.
The library bowser can be found here: https://github.com/lancedikson/bowser
I have tried to read the documentation for the project but I cant find out how I should add the library to my solution. Does not it exists a minified version of the library that I just can add to my project? It seems like I should add the library with npm when I am reading the documentation.
Unfortunately I am a rookie when it comes to npm. If I add a dependency in my package.json with the following row '"bowser": "2.4.0"', and then restores all packages I get bowser in my node_modules folder. So far so good...
Now I create a ts-file (bowsertest.ts):
import * as Bowser from "bowser";
class BowserTest {
constructor() {
const browser = Bowser.getParser(window.navigator.userAgent);
console.log(`The current browser name is "${browser.getBrowserName()}"`);
}
}
I reference the js file that is compiled for the ts-file above and reference it from a page:
<script src="bowsertest.js"></script>
But of course this will not work, since I have not loaded any js-files for bowser. How should I load the js files? Make a bundle with all js files in node_modules\bowser\src and reference it before my bowsertest.js is read?
I am lost. :)

How to rename react-native entry file (index.ios.js)

When I init a react-native project, index.ios.js is created as project entry file.
Can I change this file's name and if so, how?

When you start a react-native app you'll see this message output by the React Packager:
Running packager on port 8081
and then:
Looking for JS files in
/Users/gbirman/gil/mapily
React packager ready.
By this point, the packager has compiled your JS files and is serving them with the .js extension renamed to .bundle. For example, your index.io.js file is compiled and served from:
http://localhost:8081/index.ios.bundle
If you added another file foo.js in the same directory as index.ios.js, the packager would serve it from:
http://localhost:8081/foo.bundle
You can confirm this by opening that url in your browser.
Now to answer your question, your project has an iOS/AppDelegate.m file with the following line:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8081/index.ios.bundle"];
... as you can see, it loads the index.ios.bundle. You can change the path/filename there to whatever you want, but it's probably best to stick with the recommended approach of naming your entry file index.io.js

Suppose you've moved your index.ios.js into a folder called dist. You need to do two things
For your development environment: Update jsBundleURLForBundleRoot in AppDelegate.m to match your updated path.
For your release bundle: Open your Xcode project. You'll need to update the Bundle React Native code and images task under Build Phases for your project. Update the shell script in this section to look like below:
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh dist/index.ios.js
react-native-xcode.sh accepts the ENTRY_FILE as an optional first argument, defaulting to index.ios.js if none is found.
Updated Build Phases Example
Reference - react-native/scripts/react-native-xcode.sh

How to add date picker or any general jQuery plugin to Ember-CLI App

So I am trying to add pikaday date picker to Ember-CLI app.
I've got the following in my /app/views/calendar-view.js
import Ember from 'ember';
export default Ember.TextView.extend({
modelChangedValue: function(){
console.log(this.get('value'));
}.observes("value"),
didInsertElement: function(){
currentYear = (new Date()).getFullYear();
formElement = this.$()[0];
picker = new Pikaday({
field: formElement,
yearRange: [1900,currentYear+2]
});
this.set("_picker", picker);
},
willDestroyElement: function(){
picker = this.get("_picker");
if (picker) {
picker.destroy();
}
this.set("_picker", null);
}
});
My main issue is how to add the plugin itself into ember-cli?
This is the github link for pikaday: https://github.com/dbushell/Pikaday
More specifically I think this part might be important since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support
So how do I add the plugin itself to ember-cli?

Update
Since writing this answer, the Ember Addon API has become more usable and are a perfect option if you're building an Ember component/mixin/other class that adds to the regular js plugin.
Regular install
In a 'regular install' situation, you want the plugin to be available through your app and be included in the app's payload no matter what. To do this, add the file/package to your project's vendor directory. There are two immediately available ways to do this: use Bower or simply save a file or package in the directory.
1) Bower
Use Bower to install the package either through the terminal, like:
bower install ember-validations
Or, if there is no easy-install Bower package available, in your bower.json file:
{
"name": "app",
"dependencies": {
"chosen": "https://github.com/harvesthq/chosen/releases/download/v1.1.0/chosen_v1.1.0.zip"
}
}
2) Writing a file
You don't have to use Bower to add files and directories to your vendor directory. You could create a file anywhere inside the vendor directory, copy and paste the plugins javascript into it and save it, and it will still be available to import into your app.
3) Making it available in your app
Regardless of the method through which you create and save the plugin scripts, you have to still have to import the file directly into your app. You do this in Brocfile.js. Add an import with the path to the file (main file if it's a bower installed package) just before module.exports = app.toTree();.
app.import('vendor/ember-validations/index.js');
app.import('vendor/chosen/chosen.jquery.min.js');
There's more info in the Managing Dependencies section of the ember-cli docs.
Polyfill or other non-essential plugins
There are some situation in which you don't want to always load/run a script in your app. For example, you are loading a large polyfill only when the user is using IE. In this situation, you can create a directory in public/assets to hold the javascript files and load them using jQuery's $.getScript() method in an initializer or somewhere else within your Ember app.
I answered a similar question about that kind of scenario here.