Given that ember-cli uses ES6 modules syntax to import other JavaScript files, is it also possible to use this same syntax to import non-JavaScript files, such as JSON files or other text files?
Assume I have a JSON file named "foo.json" in my current directory. How could I import the contents of that file into a variable within my current JavaScript file? I've tried, without success, several variations of:
import foo from 'foo.json';
if (typeof foo === 'object') {
// Success
} else {
// import failed
}
Is it possible to import non-JavaScript files into the current file using the import statement or any other means?
No it's not. The ES6 modules syntax to import stuff also needs the requested object to be properly exported, which your json-files or text-files won't be. Also, since we don't really have ES6 in browsers yet, all those nifty statements are converted to commonjs-modules when building your project.
As I see it you have two options for this.
Putting the files in your public-folder and load them via ajax is the simple solution though not very elegant.
The cool option would be to add a preprocessor of your own that wraps your json-files in a proper export-statement as a build-step. That would be quite a lot of more work though and might require some deep diving into ember-cli and broccoli to attach it at the right time.
Yes, ember-cli can import JSON and non-JS files as long as you have the proper plugin.
This one allows the import of JSON files:
https://github.com/IvyApp/ember-cli-json-module
... and this one works for YAML: https://github.com/joankaradimov/ember-cli-yaml-module.
Related
I like the optimized imports a lot except for one behavior that I want to get rid of.
So if I make a bracket mistake in my JSX and use an imported library below this mistake it automatically removes this import on save. Then I fix the issue and now my imports are gone and I have to get them manually back (or copy my changes and command + z until they are back again and paste my new changes).
This is really annoying so I'm searching for the option to turn off deletion for unused imports in WebStorm.
Just found out that suppressing JavaScript and TypeScript | Imports and dependencies | Unused ES6 / TypeScript imports inspection for particular import or for the whole file with // noinspection ES6UnusedImports helps:
// noinspection ES6UnusedImports
import {Bar} from "bar";
I've got a few snippets set up and working as I would like to, but I'm having a hard time getting one snippet to work where I believe I will need to have multiple transforms occur?
Essentially I have a TypeScript Interface defined for one of my components.
i.e. IRadioButtonListProps.ts which is inside of an Interfaces folder. The Interfaces folder has a sibling folder named Theme containing an interface named IRadioButtonListTheme.ts
Inside of IRadioButtonListProps I'm trying to stub out the entire interface. The snippet I currently have stubs out the interface like...
import * as React from 'react';
import IRadioButtonListPropsTheme from '../Theme/IRadioButtonListPropsTheme';
export interface IRadioButtonListPropsProps {
...props...
}
export default IRadioButtonListPropsProps;
The import line inside of the snippet is...
"import I${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props from './Interfaces/I${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props';"
What I'm trying to have happen and can't seem to figure out is how to also remove the word "Props". So instead of import IRadioButtonListPropsTheme... I would get import import IRadioButtonListTheme....
At the same time, I want to remove all extensions, including those of the form *.abc.abc ("two" extensions) and *.abc (one simple extension).
Is this possible?
It isn't crystal clear what you what but try:
"import ${TM_FILENAME/((\\w*)Props)*?(\\..*)/$2/}Theme from './Interfaces/${TM_FILENAME/((\\w*)Props)*?(\\..*)/$2/}Theme';"
which results in:
import IRadioButtonListTheme from './Interfaces/IRadioButtonListTheme';
from IRadioButtonListProps.ts
and
import CheckboxListTheme from './Interfaces/CheckboxListTheme';
from CheckboxListProps.test.tsx
[Edit] Here is a simpler version which I think also works:
"import ${TM_FILENAME/(Props)*?(\\..*)//}Theme from './Interfaces/${TM_FILENAME/(Props)*?(\\..*)//}Theme';"
match any "Props", if any, replace with nothing.
match from first \. to end of filename, replace with nothing.
I am trying to add an external locale directory from the pycountry package.
Before initializing Flask Babel, I do the following:
import pycountry
app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations;' + pycountry.LOCALES_DIR
But alas, this does not seem to be enough. For example, gettext('Germany') will not find the translation.
I think the problem might be how translations are structured in pycountry.
~/.local/lib/python3.5/site-packages/pycountry/locales/pt/LC_MESSAGES$ ls
iso15924.mo iso3166-3.mo iso4217.mo iso639-3.mo
iso3166-1.mo iso3166.mo iso639_3.mo
Do I need to specify I want, e.g., the iso3166 file? Please see the following reference.
Reference: pycountry locale documentation section
I also needed to load pycountry locale with flask babel.
To do that, I look into flask-babel get_translations() about how they load translations.
Anyway, I have something working putting this somewhere in your app.
def hack_country_gettext(string):
translations = support.Translations()
catalog = translations.load(pycountry.LOCALES_DIR, [get_locale()], 'iso3166')
translations.merge(catalog)
return translations.ugettext(string)
and instead of _('Germany') use the hack function hack_country_gettext('Germany')
By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files).
What is the best way to configure ember-cli to merge all files in app/styles (and subdirectories) into one app.css file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override EmberApp.styles()?
Update: As far as I can see there are the following (not very elegant) options:
1) Using SASS and #import the CSS files into app.scss individually. The downside of this is that I need to use an extra plugin (SASS) and that SASS does not seem to allow for globbing patterns in #import (e.g. #import('**/*.scss')), which makes this solution cumbersome for big projects.
2) Overriding EmberApp.styles() such that it does not copy the CSS files (this is currently being done by a wrapper around broccoli-static-compiler) and configuring Broccoli such that it concatenates the css files into app.css. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.
3) Workaround: Use broccoli-funnel and broccoli-concat to do the concatenation yourself.
In Brocfile.js:
var appTree = app.toTree()
var concatenated = concat(appTree, {
inputFiles: [
'**/*.css'
],
outputFile: '/assets/app.css',
});
module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
This will create a new app.css with all our concatenated CSS in /assets/app.css.However, this file not fingerprinted. Our assets directory now looks something like this:
/assets/app.css
/assets/app-<fingerprint>.css
So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted app-<fingerprint>.css, 2) delete app-<fingerprint>.css and 3) rename app.css to app-<fingerprint>.css. This last step can be automated using Grunt or gulp.
Personally, I think SCSS would be the way to go. It is the simplest solution and there are other advantages to using SCSS besides importing things into one file (variables for repeated patterns, for example).
In addition, manually adding files allows the developer to configure exactly where each piece of code is included. I don't see that as a con, but I can understand the other point of view and I've definitely spent 5m trying to figure out why my styles weren't being applied until I realized it was because I didn't include a new style file.
Edit: There are some node-sass globbing solutions available that could probably be added if that is a big show stopper.
I'm trying to generate some LaTeX code which from thereon should generate PDF documents.
Currently, I'm using the Django templating system for dynamically creating the code, but I have no idea on as how to move on from here. I understand that I could save the code in a .tex file, and use subprocess to run pdflatex for generating the PDF. But I had so much trouble escaping the LaTeX code in "plain" Python that I decided to use the Django templating system. Is there a way that I could somehow maybe pipe the output produced by Django to pdflatex? The code produced is working properly, it's just that I do not know what to do with it.
Thanks in advance
I was tackling the same issue in a project I had previously worked on, and instead of piping the output, I created temporary files in a temporary folder, since I was worried about handling the intermediate files LaTeX produces. This is the code I used (note that it's a few years old, from when I was still new to Python/Django; I'm sure I could come up with something better if I was writing this today, but this definitely worked for me):
import os
from subprocess import call
from tempfile import mkdtemp, mkstemp
from django.template.loader import render_to_string
# In a temporary folder, make a temporary file
tmp_folder = mkdtemp()
os.chdir(tmp_folder)
texfile, texfilename = mkstemp(dir=tmp_folder)
# Pass the TeX template through Django templating engine and into the temp file
os.write(texfile, render_to_string('tex/base.tex', {'var': 'whatever'}))
os.close(texfile)
# Compile the TeX file with PDFLaTeX
call(['pdflatex', texfilename])
# Move resulting PDF to a more permanent location
os.rename(texfilename + '.pdf', dest_folder)
# Remove intermediate files
os.remove(texfilename)
os.remove(texfilename + '.aux')
os.remove(texfilename + '.log')
os.rmdir(tmp_folder)
return os.path.join(dest_folder, texfilename + '.pdf')
The dest_folder variable is usually set to somewhere in the media directory, so that the PDF can then be served statically. The value returned is the path to the file on disk. The logic of what its URL would be is handled by whatever function sets the dest_folder.