I have many imports for angular components, and it looks like I can write a function to simplify the import. I just don't know how, but this should be simple.
Sample imports:
import {DashboardComponent} from './app/components/dashboard/dashboard.component';
angular.module('app.components').component('dashboard', DashboardComponent);
import {HeaderComponent} from './app/components/header/header.component';
angular.module('app.components').component('header', HeaderComponent);
The function below demonstrates what I want to achieve, however I'm missing two concepts to make it work:
How do I put a variable (name) in the {}?
Can I use an Angular filter in a function like | ucfirst in a JS file?
componentImporter('header');
function componentImporter(name)
{
import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';
angular.module('app.components').component(name, name | ucfirst + 'Component');
}
Finally an error I run into is:
'import' and 'export' may only appear at the top level
So can this actually ever work?
So can this actually ever work?
Short Answer: No
Long Answer
The error you saw pretty much says it all... imports can't be nested inside conditionals, loops, or other expressions. Here's a great article on ES6 Modules that goes in depth on the subject. Another interesting note, also mentioned in that article, is that imports are hoisted, similar to functions.
How to put a name in the {} and 2) can I use an angular filter in the fuction like | ucfirst in a js file?
From the article:
...the structure of ES6 modules is static
Using a variable in the import would make it dynamic. The bracket syntax you're using can only be written to do a partial import (i.e. Importing named exports from the given module). This is really neat if you're using tree shaking, another article by Dr. Rauschmayer.
Personally I like keeping all my imports at the top of each file making it very easy to see what that particular module is dependent on.
Update
There is now the dynamic import() method. Some bundlers like webpack already support this method natively. This method is what should be used for dynamic importing of modules. Note that "Dynamic Imports" is an umbrella topic that contains a few subtopics including "Code Splitting", "Dynamic Module Expressions", as well as using logic to determine whether a module and its dependencies should be loaded.
Related
I'm trying to implement drag and drop using this tutorial. In this tutorial i have to create a refs like this list = createRef<RecyclerListView<any, any>>() (line no 55), which is giving me syntex error: unexpected token. What i understand is that, they are using .tsx extension (don't know what for) but i'm using .js extension, which maybe the reason why this code not working in my end, and not finding any solution of that. Can anyone help me out on that? Thank you
.tsx extension is for Typescript files. Javascript is not a typed language. To put it simply, Typescript was built to make Javascript look like a typed language. Whatever you put in <> after createRef, specifies the type of the ref that is being created and you can only use types in Typescript files (.ts and .tsx). If you want to move to Typescript, you'll have to do some setup and change your file extensions to .tsx. Otherwise, if you'd like to stay on .js, just ignore the types in the tutorial and instead write list = createRef().
Im attempting to update an old version of the selenium-tcl package to work with the new W3C WebDriver (or Selenium 4.0).
Original packages uses a few mixins for the webdriver class.
So I modeled what I saw and created a mixin file named mixin_action_chains.tcl [1] which has a mixin class called Mixin_Action_Chains.
Whenever I attempt to use it I get the error:
% package require selenium
::selenium::Mixin_Action_Chains does not refer to an object
Im not sure why I've modeled it pretty much exactly as I have seen in the other files such as mixin_for_scrolling.tcl [2]* file. What am I missing.
Here is the entire GitHub Repo
Im not sure what else must be done for TclOO. Any thoughts.
Thanks
Im not sure what else must be done for TclOO. Any thoughts.
Update
pkgIndex.tcl: The placement of the mixin-defining script mixin_action_chains.tcl is wrong, it comes after the mixin has already been required in the previously sourced script webdriver.tcl, like entering directly:
% oo::class create C {
mixin ::not::defined
}
::not::defined does not refer to an object
You need to change the order of source command calls in the package ifneeded script.
For the records
Still, in the original version, there were unbalanced curly braces and brackets in your script, which broke sourcing of the file for me:
https://github.com/SavSanta/w3cselenium-tcl/pull/1
I have an object that contains content for a page, I import it and try to use it like you'd use any object variable:
import {Variable} from 'data'
const message = defineMessages({
message: {
id: 'component.title',
defaultMessage: Variable.title
}
})
However, I get React Intl] Messages must be statically evaluate-able for extraction.. I googled a lot and found no solution to this. I'm using babel-plugin-react-intl to generate the locale files, and a contributor said that Babel can only parse simple statically messages
It's hard to believe there's no way to be able to import content from another file and have it translated. There must be a way, I couldn't come up with a solution and help would be appreciated.
I struggled with the same problem by myself. As far as I know, there's no way to translate a content of a variable in react-intl.
If you're interested in alternative solutions, I wrote jsLingui i18n library and recently just added support for noop translations, which is exactly what you're looking for.
I am creating a SCSS for a component, and looking at ExtJS SCSS I find in Base.scss that a lot of variables (if not all) are defined as:
$form-field-empty-color: dynamic(gray);
$form-field-border-color: dynamic($neutral-color);
$form-field-border-width: dynamic(1px);
$form-field-border-style: dynamic(solid);
...
What is that dynamic function? My fu skill in search seems not to be the at the needed level :C
Thanks!
Ext uses Fashion, which is an extension of SASS. See: https://docs.sencha.com/cmd/guides/fashion.html
It's somewhat similar to !default in SASS, but it defers computation until all variables are known.
I'm using underscore.js for my templates which are stored in multiple separate XXX_tpl.html files inside sections similar to:
<script type="text/x-template" id="tpl_XXX">
<h1>hi</h1>
</script>
Which I am then using inside backbone.js views as follows:
render: function () {
this.$el.html($('#tpl_XXX').text());
}
I am now using brunch.js build tool which nicely outputs all my libs/js/css code into several optimized files but I am having issue with managing / organizing my templates. How do I make brunch.js build tool to append all *_tpl.html files at the end of index.html? All the examples I am seeing online show how to use brunch.js to merge templates into .js files but I don't yet understand how that works (the templates are a mix of html/js and I lose both access by ID and syntax formatting/highlighting when storing templates in .js files).
Q1. If what I'm doing is right (multiple templates in multiple different .tpl.html files all appended at the end of index.html when built) then how do I make build.js merge all of that?
Q2. If what I'm doing isn't right, what's a better approach to:
have multiple templates that are organized and easily managed
not create additional http requests to pull / all compiled into a single file
have easy access from backbone.js models
want to achieve syntax highlighting in my IDE for the template markup (i.e. no JS string concatenations, etc)
Nice question, but I don't know if you understood how underscore templates should work precisely. Let's try to clear that up first.
Template compilation
An underscore template source is any text with interpolated code. For example:
var myTemplateString = "hello: <%= name %>";
When you want to use that template, you need to compile it into a function first. What? Here's how it works:
var myTemplateFunction = _.template(myTemplateString);
This creates a myTemplateFunction which contains your template logic. In a very simplified, pseudo-code way, you can expect myTemplateFunction to work somewhat like this:
function (context) { return "hello: " + context.name };
So, now you understand why you can call this function and produce a string!
myTemplateFunction({name: 'moe'}) // hello: moe
Using compiled templates
OK, but why do you need to compile it previously? Why not always call directly:
_.template(myTemplateString)({name: 'moe'})
Because compilation can be CPU-intensive. Therefore, it's much faster to use a pre-compiled template. You should not force the user's browser to do it! You should do it for him!
Delivering compiled templates
By now, you understand you don't care about delivering the text of your functions to your client, only the compiled template functions. There are many ways to accomplish that.
Brunch has a bunch of plugins for pre-compiled templates, but apparently none for underscore: http://brunch.io/plugins.html
You can use webpack and it's EJS template loader.
Your code would look something like this:
var myTemplateFunction = require('./template.html')
console.log(myTemplateFunction);
You can also use Grunt and it's underscore template task: grunt-contrib-jst.
Whichever you choose, they will all work similarly: they'll compile your template into a function and you'll be able to use that function. Personally, I recommend learning webpack!