enactjs/cli

Full-featured build environment tool for Enact applications

cli's Issues

Removing i18n files from output of enact pack?

Is there any way in enact cli to remove i18n files in order to reduce size of output? I'm making my app in Korean only but these files are always included in dist and they are much huge compared to main.js and main.css.

Packaging ENACTJS app for LG TV publishing

I package EnactJS app with npm run pack and Use the LG TV CLI ares-package to package the dist folder into *.ipk file. I then install the *.ipk file to the LG TV with ares-install. However the app does not seem to be able to launch and run on the TV.

Here is the app-info JSON file.
{ "id": "com.mikedoconsulting.cctv", "version": "1.0.0", "vendor": "LGE-SVL", "type": "web", "main": "index.html", "title": "CCTV", "icon": "icon.png", "miniicon": "icon-mini.png", "largeIcon": "icon-large.png", "uiRevision": 2 }

How to configure import alias

I wanted to add alias import in an Enact project: i configured the tsconfig.json like bellow:
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "paths": { "@App/*": ["./src/App/*"], "@Components/*": ["./src/Components/*"], "@Views/*": ["./src/Views/*"] }, }, "include": [ "src", "types" ] }

and i saw in readme that there is alias that can be added to the enact object in package.json:

"alias": { "@App/*": ["./src/App/*"], "@Components/*": ["./src/Components/*"], "@Views/*": ["./src/Views/*"] }

i don't if it's the right way to it or alias import is not available in Enact but when i make import like:
import MyComponent from '@Components/MyComponent
It said can't resolve @Components/MyComponent.

Hot reload changed locale files

Hi enact team,

I'm writing an enact app, it supports 2 languages. Every time I make changes in localization files (strings.json) and save, nothing happens, the changes not reload directly, so I have to enact serve again.
Is it possible to update locales without restarting node server? It's better if enact-cli could support this.

Thanks.

enact create doesn't create a webos-meta folder?

I'm following the tutorial at https://enactjs.com/docs/tutorials/setup/ to do some development on webOS.

As a sanity check, I'm just trying to install the very basic app that's generated by enact create my-app.

However, npm pack just creates a .tgz (perhaps to be expected), and ares-package ./my-app yields ares-package ./my-app ares-package ERR! *** ares-package: ERROR: '/Users/lase/Code/my-app' has no meta files such as appinfo.json.

Am I missing something? Do I need to add additional flags to generate the meta folder?

Convert aspect ratio from pixel to rem is not working on locally while build or serve app with Environment Variables

Dear Enact team,

I have already overridden the resolution for my monitor with a value like this

....
const screenTypes = [
    {"name": "hd", "pxPerRem": 16, "width": 1280, "height": 720, "aspectRatioName": "hdtv"},
    {"name": "fhd", "pxPerRem": 24, "width": 1920, "height": 1080, "aspectRatioName": "hdtv"},
    {"name": "uw-uxga", "pxPerRem": 24, "width": 2560, "height": 1080, "aspectRatioName": "cinema"},
    {"name": "wqhd", "pxPerRem": 32, "width": 3440, "height": 1440, "aspectRatioName": "cinema", "base": true},
    {"name": "uhd", "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv"},
    {"name": "uhd2", "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"}
];

export default ThemeDecorator({noAutoFocus: true, ri: {screenTypes}}, MyApp);

My .env file

ENACT_RI='{"baseSize": 32}'

when I run npm run serve then the font-size base set by @enact/ui/resolution package is correct(32px), but all of the aspect ratios in my style file(*.module.less) are the wrong value(convert pixel to rem), I am using browser inspector to check the values, it always divides for 48.

I did some debugs on CLI then I see that Enact's CLI is using Webpack to bundle the modules and it is loading all of the environment variables here https://github.com/enactjs/cli/blob/master/config/webpack.config.js#L48 after we apply to enact meta configuration in option-parser.js in https://github.com/enactjs/dev-utils/blob/master/option-parser.js#L212, so ENACT_RI variable doesn't exist in process.env => it is not working.

How to fix it?

I think we should re-apply enact meta configuration after Webpack loads all of the configs from .env if any, should update webpack.config.js file as the code below:

....
// Load applicable .env files into environment variables.
require('./dotenv').load(app.context);

// apply with the latest version of .env if any
app.applyEnactMeta();
....

After I try to edit the config then it is working fine for me, how do you think? If I mistake something then feel free to let me know.

Thanks and Regards,

========================================
node: v18.12.1
@enact/cli: 5.1.0

Add v8 snapshot flag to appinfo.json

If user pack the app with --snapshot option,
please add "v8SnapshotFile": "snapshot_blob.bin" to appinfo.json.

Error When using enact create

I get the following error when trying to execute enact create test. The error does not occur if I revert to @enact/[email protected].

Creating a new Enact app in test...

npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t ssh://[email protected]/enyojs/sandstone.git
npm ERR!
npm ERR! Warning: Permanently added the RSA host key for IP address *** to the list of known hosts.
npm ERR! [email protected]: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

Error run serve

I create new project, after then run enact eject and package.json will be change
"scripts": {
"serve": "node ./scripts/serve.js",
"pack": "node ./scripts/pack.js",

But when run npm run serve which will show error 'SyntaxError: Unexpected token (19:2)
' at App.js
Please help me check it again! Maybe outupdate.
Current version enact cli: 2.0.2
Version enact in package.json:
"dependencies": {
"@babel/polyfill": "7.2.5",
"@enact/core": "^2.0.0",
"@enact/i18n": "^2.0.0",
"@enact/moonstone": "^2.0.0",
"@enact/spotlight": "^2.0.0",
"@enact/ui": "^2.0.0",
"prop-types": "^15.6.2",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"@babel/core": "7.2.2",
"@babel/plugin-proposal-class-properties": "7.3.0",
"@babel/plugin-proposal-export-default-from": "7.2.0",
"@babel/plugin-proposal-export-namespace-from": "7.2.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-react-inline-elements": "7.2.0",
"@babel/preset-env": "7.3.1",
"@babel/preset-react": "7.0.0",
"@babel/preset-typescript": "7.1.0",
"@enact/dev-utils": "2.1.0",
"@enact/template-moonstone": "2.3.1",
"acorn": "^6.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "24.1.0",
"babel-loader": "8.0.5",
"babel-plugin-dev-expression": "0.2.1",
"babel-plugin-dynamic-import-node": "2.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chai": "4.2.0",
"chalk": "2.4.2",
"cross-spawn": "6.0.5",
"css-loader": "2.1.0",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.9.1",
"eslint": "5.13.0",
"eslint-config-enact": "1.4.1",
"eslint-loader": "2.1.2",
"eslint-plugin-babel": "5.3.0",
"eslint-plugin-enact": "0.1.3",
"eslint-plugin-jest": "22.3.0",
"eslint-plugin-react": "7.12.4",
"expose-loader": "0.7.5",
"file-loader": "3.0.1",
"filesize": "4.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-alpha",
"identity-obj-proxy": "3.0.0",
"jest": "24.1.0",
"less": "3.9.0",
"less-loader": "4.1.0",
"license-checker": "25.0.1",
"mini-css-extract-plugin": "0.5.0",
"minimist": "1.2.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-global-import": "1.0.6",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-resolution-independence": "1.0.0",
"raw-loader": "1.0.0",
"react-dev-utils": "7.0.3",
"react-test-renderer": "16.8.1",
"resolution-independence": "1.0.0",
"resolve": "1.10.0",
"strip-ansi": "5.0.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.2",
"webpack": "4.29.3",
"webpack-dev-server": "3.1.14"
}

https serve is not working

hi

in serve.js
function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
let https = false;
const {SSL_CRT_FILE, SSL_KEY_FILE} = process.env;
if (protocol === 'https' && [SSL_CRT_FILE, SSL_KEY_FILE].all(f => f && fs.existsSync(f))) {

all() is correct?
it should be changed to every().

Thanks.

TypeError: Cannot read property 'current' of undefined

Test/index.js

import React from 'react';
import PropTypes from 'prop-types';

const TestComp = ({value}) => {
        return (
                <div>
                        {value}
                </div>
        );
};

TestComp.propTypes = {
        value: PropTypes.string.isRequired,
};

export default TestComp;

---

Test/index.test.js

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import Test from './index';

describe('st Test Cases', () => {
        it('matches snapshot', () => {
                const utils = render(
                        <Test
                                value={'on'}
                        />
                );
                expect(utils.container).toMatchSnapshot();
        });

});

I tried in latest cli 2.7.0
my steps..
$ enact create test
$ npm install react react-dom
$ npm install --save-dev @testing-library/jest-dom@testing-library/react
// add upper code(index.js) and test code(index.test.js)

enact test returns below errors
$ enact test

TypeError: Cannot read property 'current' of undefined

   7 | describe('st Test Cases', () => {
   8 |      it('matches snapshot', () => {
>  9 |              const utils = render(
     |                            ^
  10 |                      <Test
  11 |                              value={'on'}
  12 |                      />

  at act (../../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:908:55)
  at render (../../../node_modules/@testing-library/react/dist/pure.js:82:26)
  at Object.it (index.test.js:9:17)

this is my package.json

        "dependencies": {
                "@enact/core": "^3.0.0",
                "@enact/i18n": "^3.0.0",
                "@enact/moonstone": "^3.0.0",
                "@enact/spotlight": "^3.0.0",
                "@enact/ui": "^3.0.0",
                "ilib": "^14.2.0",
                "prop-types": "^15.6.2",
                "react": "^16.13.1",
                "react-dom": "^16.13.1"
        },
        "devDependencies": {
                "@testing-library/jest-dom": "^5.3.0",
                "@testing-library/react": "^10.0.2"
        }