I'm running yeoman with gulp and I want to print a user's github name using this mixin: http://yeoman.io/generator/actions_user.html#.git.name
Simply adding var username = git.name(); doesn't work
How can I use this mixin and other mixins in yeoman? Do I need to require or include anything in index.js file other than yeoman itself?
No need to import anything. Just prefix the call with this.user. This applies to your example as such:
var username = this.user.git.name());
This makes it somewhat inconsistent with the other mixins outside of this.user, which can be accessed directly via this, eg. this.installDependencies().
Related
I am trying to show a diff for two JSON objects in Angular 4 view, I am using this library (angular-object-diff) originally built for AngularJS.
Demo of that library: Link
I tried to import this JS library the following way:
JS file I am trying to import: angular-object-diff.js, doesnt have a exported variable
In my typings.d.ts ( I added the following):
declare var ObjectDiff: any;
In my angular-cli.json, I added
"scripts": [
"../node_modules/angular-object-diff/dist/angular-object-diff.js"
],
In my component file:
const json1 = {
name: 'John'
};
const json2 = {
name: 'Johnny'
};
const diff = ObjectDiff.diffOwnProperties(json1, json2);
this.jsonViewData = ObjectDiff.toJsonDiffView(diff);
In my view:
<pre ng-bind-html="jsonViewData"></pre>
<pre> {{jsonViewData}}</pre>
Nothing seems to be working, I get the error that "ObjectDiff" is not defined in the console"
Can someone please let me know if I am doing in thing wrong ?
Suggestions for displaying the JSON diff are also welcomed :)
** Thank you
The library doesn't export anything. It uses IIFE to not pollute global scope with local variables. It's impossible to reach local variables from the outside, this makes Module pattern so effective (and annoying).
The library uses AngularJS angular global and expects that it will exist. This creates a problem, because Angular 4 application should mock angular global in this case. Moreover, the code itself relies on AngularJS-specific units ($sce service).
The library should be forked and modified to suit the expectations. The mentions of angular should be removed. Considering that script will be executed in module scope, IIFE should be removed and appropriate exports should be added.
Previously I've been using following in my JS entry points:
require('coffeescript/register');
module.exports = require('./entry.coffee');
What is the corresponding ES6 syntax of this?
Following does not seem to register anyhing.
import 'coffeescript/register';
export * from 'entry.coffee';
Error is:
Cannot find module 'entry.coffee'
Tested on Coffeescript 2.0 beta2.
Update:
Changing path to relative:
import 'coffeescript/register';
export * from './entry.coffee';
finds the entry.coffee, but treats it as JS. Hence, Coffeescript is not handled by transpiler.
You don't need to use coffeescript/register if you're transpiling the CoffeeScript as part of your bundling process (which you need to, if you're using Rollup) — that's just a way to enable Node to run CoffeeScript files without having to first convert them.
Instead, try adding rollup-plugin-coffee-script to your rollup.config.js file.
I'm trying to create a mixin that's globally available, but not automatically injected into every component. i.e. i do NOT want this: Vue.mixin({...});
I set up the project according to these instructions. This is my project structure. I also have assets/js/mixins.js file in there containing my mixins.
I would like to be able to do this in my individual .vue files (many of my components use myMixin but not all of them):
<script>
export default {
mixins:[myMixin],
data:{....}
}
</script>
<template>
<!-- some template code -->
</template>
So far the only way to do that is to add this line to the top of every component that needs it:
import {myMixin} from './assets/js/mixins.js"
but is there a way to do this once and have myMixin variable available globally? I've tried including it in main.js and in app.vue but I still get "myMixin is not defined" error if I try to use myMixin in any of the child components.
Or is there another way to register a mixin that doesn't require me typing the path to the mixins.js file in each component?
I would suggest setting your mixin up as a plugin. To do that, wrap it within an function call install and export the install function. Then, wherever your instantiate your app, you can simply do Vue.use(yourMixin):
Docs:
https://vuejs.org/guide/plugins.html
http://vuejs.org/api/#Vue-mixin
Example:
//- build your mixin
const mixin = {
// do something
}
//- export it as a plugin
export default {
install (Vue, options) {
Vue.mixin(mixin)
}
}
//- make it globally available
import myMixin from './myMixin'
Vue.use(myMixin)
Vue.use calls in the install fn(), so all subsequent Vues (or all if none have yet been created) have the mixin functionality
Careful of namespace clashes on globally available mixins (!)
A couple of ideas:
In main.js you can declare window.myMixin = {...}, which I believe will make it available in any component loaded after that.
edit: this is even better if you use this.myMixin, as this will refer to the global scope. That way you aren't depending on window existing, so it could be used in more environments
To not have to declare the full path in each file, you could create the mixin as a local NPM module as per Installing a local module using npm?. Then you could just import myMixin from 'myMixin'. This would be the more proper way to do it I think, that way you're still loading dependencies in each component, just with some shorthand.
Here is the correct way to register a mixin globally in app.js
Vue.mixin(myMixin);
I am currently learning Meteor and I found out something that intrigued me.
I can load HTML and CSS assets from a JS file using the import statement.
import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';
import * as myApp from '../imports/hello/myapp.js';
This was a surprise to me so I ran to google but could not find this behavior documented in the specification for ES6 import or in Meteor's Docs.
So my questions are:
Can I rely on this behavior to build my apps?
Will my app will break when Meteor gets around to fix it -- if it's a bug --?
Notes
I am using Meteor v1.3, not sure if this works also with previous versions.
You can download the app to see this behavior from Github
After going through the implementation of the built files for my app
I found out why this works.
HTML
Files are read from the file system and their contents added to the global Template object, e.g.,
== myapp.html ==
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
results in the following JS code:
Template.body.addContent((function () {
var view = this;
return [
HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n "),
Spacebars.include(view.lookupTemplate("hello"))
];
}));
Which is wrapped in a function with the name of the file as it's key:
"myapp.html": function (require, exports, module) {
Template.body.addContent((function () {
var view = this;
return [
HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n "),
Spacebars.include(view.lookupTemplate("hello"))];
}));
Meteor.startup(Template.body.renderToDocument);
Template.__checkName("hello");
Template["hello"] = new Template("Template.hello", (
function () {
var view = this;
return [
HTML.Raw("<button>Click Me</button>\n "),
HTML.P("You've pressed the button ",
Blaze.View("lookup:counter",
function () {
return Spacebars.mustache(view.lookup("counter"));
}), " times.")
];
}));
},
So all of our HTML is now pure JS code which will be included by using require like any other module.
CSS
The files are also read from the file system and their contents are embedded also in JS functions, e.g.
== myapp.css ==
/* CSS declarations go here */
body {
background-color: lightblue;
}
Gets transformed into:
"myapp.css": ["meteor/modules", function (require, exports, module) {
module.exports = require("meteor/modules").addStyles("/* CSS declarations go here */\n\nbody {\n background-color: lightblue;\n}\n");
}]
So all of our CSS is also now a JS module that's again imported later on by using require.
Conclusion
All files are in one way or another converted to JS modules that follow similar rules for inclusion as AMD/CommonJS modules.
They will be included/bundled if another module refers to them. And since all of them are transformed to JS code
there's no magic behind the deceitful syntax:
import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';
They both are transpiled to their equivalent forms with require once the assets have been transformed to JS modules.
Whereas the approach of placing static assets in the imports directory is not mentioned in the official documentation,
this way of importing static assets works.
This seems to be at the core of how Meteor works so I'd bet this functionality is going to be there for a long while.
I don't know if to call this a feature maybe a more appropriate description is unexpected consequence but that would
only be true from the user's perspective, I assume the people who wrote the code understood this would happen and perhaps even
designed it purposely this way.
One of the features in Meteor 1.3 is lazy-loading where you place your files in the /imports folder and will not be evaluated eagerly.
Quote from Meteor Guide:
To fully use the module system and ensure that our code only runs when
we ask it to, we recommend that all of your application code should be
placed inside the imports/ directory. This means that the Meteor build
system will only bundle and include that file if it is referenced from
another file using an import.
So you can lazy load your css files by importing them from the /imports folder. I would say it's a feature.
ES6 export and import functionally are available in Meteor 1.3. You should not be importing HTML and CSS files if you are using Blaze, the current default templating enginge. The import/export functionality is there, but you may be using the wrong approach for building your views.
I want to use something like Nunjucks render, but with another function. For example addglobal.
Is it possible?
The typical other way to add variables would be to use Nunjucks Enviorment's and use addGlobal.
Gulp nunjucks render is built so that it handles it's own environments (as default nunjucks behavior), and as you stated you can pass variables as an object on the render call.
That being said, it does give you the ability to control your own environment it looks like. After some tinkering I was able to create my own environemnt using:
var nunjucksRender = require('gulp-nunjucks-render');
var nunEnv = new nunjucksRender.nunjucks.Environment([loaders], [opts]);
At that point you can handle it manually as per the Enviroment doc listed above, and use addGlobal as you desire. It will be a bit more work though then the default usage described here, https://github.com/carlosl/gulp-nunjucks-render