My project it's a Stencil+Ionic PWA starter and I'm using file .env to use my enviroment variables.
On browser it's okay, but If I use Appflow and I create an APK, I have the error "process is note defined"
How can I use the enviroment variabiles to work properly on native builds?
I'm not using Angular and I've found only Angular solutions.
I don't have Growth plan so I can't use enviroment in Appflow.
Since version 2.3.0, Stencil has an env option in stencil.config.ts. It was added in this commit, which is the only documentation that's currently available for it.
Basically you do something like
// stencil.config.ts
export const config: Config = {
// ...
env: {
FOO: 'bar'
}
}
and then in your modules you can import Env from Stencil:
import { Component, Env } from '#stencil/core';
#Component({ tag: 'my-component' })
export class MyComponent {
render() {
return <p>{Env.foo}</p>
}
}
Related
I'm using vue-cli version 3.11.0 to build my web app along with the pwa plugin. I'd like to change the appname (the one that shows up when adding to homescreen). How do I do so? I don't see any manifest.json file anywhere in the project.
If you using #vue/cli-plugin-pwa, check this.
// vue.config.js in your project (IF NOT EXIST, create new one)
module.exports = {
// ...other vue-cli plugin options...
pwa: {
name: 'My App', // <---- this is PWA name
}
}
I've created a vue3 cli project with Mocha testing:
vue create vue_proj_with_mocha_testing
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha
Then in Visual Code I install the Mocha Test Explorer extension, restart, add the folder to the workspace, click the folder, ctrl-shift-p and Mocha Test Explorer : "Enable for a workspace folder". Out of the box Mocha Test Explorer doesn't seem to like vuecli's example.spec.js test:
import { expect } from 'chai'
import { shallowMount } from '#vue/test-utils'
import HelloWorld from '#/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
I add this entry to settings.json so that Test Explorer finds the vue "tests" folder, which is different from the default of "test".
"mochaExplorer.files": ["tests/**/*.spec.js"],
And then receive this error in Test Explorer:
import { expect } from 'chai';
^^^^^^
SyntaxError: Cannot use import statement outside a module
This indicates I have some transpiling work to do, and Mocha Test Explorer indicates the way to do that is the "mochaTestExplorer" fields in settings.json, but I'm not sure what combination of babel packages would be required. What should be done to run this out-of-the-box vue-cli-3 test in Mocha Test Explorer in Visual Studio Code? Here is my current guess:
"mochaExplorer.require": [
"#babel/preset-env",
"#babel/register",
"#babel/polyfill",
"#babel/plugin-transform-runtime"
],
First, add #babel/register in yours devDependencies.
After, add in your Visual Studio Code settings.json:
"mochaExplorer.files": "tests/**/*.spec.js",
"mochaExplorer.env": {
"NODE_ENV": "test"
},
"mochaExplorer.require": [
"#babel/register"
]
Finally, changes your babel.config.js to like this:
const presets = [];
if (process.env.NODE_ENV === 'test') presets.push('#babel/preset-env');
else presets.push('#vue/cli-plugin-babel/preset');
module.exports = {
presets,
};
I'm afraid what you want is not possible - problem is it is not enough to setup Babel correctly. Vue single file components (.vue) need to be processed by Vue Loader which is Webpack loader plugin.
And there is no easy way how to setup Mocha Test Explorer to use webpack as indicated by the author himself in this thread - Support for vue cli projects
So I decided to split my tests into two groups, tests/ui (tests using Vue components) and tests/unit (non-ui tests) and use setup described by Fernando with these modifications:
Configure Mocha Test Explorer to only search for non-ui tests:
"mochaExplorer.files": "tests/unit/**/*.spec.js",
package.json:
"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",
...to include both folders when running tests from command-line
Note: Last step - modifying babel.config.js - is not needed, everything works fine without it....
On a slightly different config, i worked for me: in .vscode/settings.json
{
"mochaExplorer.require": "esm"
}
esm should also be in your dev dependencies
I've seen similar questions but still can't find a viable solution.
I'm trying to integrate Jest into a working project, which uses import/export default in hundreds of places. The following test does work for Jest using require:
const bar = require('../../flows/foo');
test('adds 1 + 2 to equal 3', () => {
expect(bar.foobar(1, 2)).toBe(3);
});
when export is:
module.exports = {
foobar: foobar,
fizz: fizz
}
The functions I'll want to be testing however are exported using:
export default {
foobar: foobar,
fizz: fizz
};
So when I try to update my test to import:
import foobar from '../../flows/foo';
With export:
export default {foobar: foobar};
I get the error
SyntaxError: Unexpected token import
All it takes:
// run this command (or npm equivalent)
yarn add #babel/core #babel/preset-env
// add babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Jest automatically picks it up, no other configuration required.
You have not set up a .babelrc file in your project, so transpiling is not happening. You need to transpile the ES6+ syntax (import, export, etc) into browser readable ES5.
I ran into this and solved it this way thanks to this GitHub issue post:
If you're using babel to transpile your code then remember to use the transform-es2015-modules-commonjs plugin.
To use it, you'll need to:
Install the plugin for BabelJS by entering this command in the CLI:
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
Add the plugin to your list of plugins in your babel config
plugins: [
"transform-es2015-modules-commonjs"
]
What process do you use to develop Babel 6 plugins?
Here's what I came up with to develop a plugin (babel-plugin-test):
1) In an empty folder run:
npm install babel-cli babel-preset-es2015
2) Create the file src/test.js (to test the plugin) with just:
class Person {
}
3) Create the folder node_modules/babel-plugin-test with the following contents
node_modules/babel-plugin-test/package.json
{
"name": "babel-plugin-test",
"version": "0.1.0",
"main": "lib/index.js",
"dependencies": {
"babel-runtime": "^5.0.0"
},
"devDependencies": {
"babel-helper-plugin-test-runner": "^6.3.13"
}
}
node_modules/babel-plugin-test/src/index.js
export default function ({types: t }) {
return {
visitor: {
ClassDeclaration: function (node, parent) {
console.log("XXX");
}
}
};
}
4) Create a script that runs:
node_modules/babel-plugin-test/babel --presets es2015 --out-dir lib src
babel --plugins babel-plugin-test --presets es2015 --out-dir out src
So it compiles the plugin and then compiles test.js using the plugin and I see the console log and the output file (in this example I'm not changing anything).
There has to be a better way to do this. Maybe some way to use WebStorm or another Node debugger to put a breakpoint and play around (at least be able to inspect variables).
The way to go is to run babel in code so you can get the transpiled code and compare against what you expect.
First transpile your plugin as you did, then in the test folder
var transformFileSync = require('babel-core').transformFileSync
var path = require('path')
var fs = require('fs')
var plugin = require('../lib/index').default
describe('My test', function (){
it ('Transform', function(){
var transformed = transformFileSync(path.join(__dirname, 'testFilePath'), {
plugins: [[plugin]]
}).code
var expectedCode = fs.readFileSync(..)
assert.equal(transformed, expected)
})
})
You can find an example here. It is also possible to write the tests in ES6 importing modules, for that you need to provide mocha with a compiler, see here for an example.
For basic testing I use the wonderful astexplorer. Just set the parser to babylon 6 and turn on transform and set it to babelv6. Then you can put your code in one pane, see the AST results in another, put your babel plugin in a third pane and see the plugin result in the fourth.
For a more complicated test I create two projects, one for the plugin and another one i want to test the plugin on. I npm link the two and configure the test project to use my plugin in babelrc. Then, whenever my plugin changes i just run babel on my file/project and see the results.
Im not sure if this is the best way but it works for me.
I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25