Skip to content

WRR-14491: Update cli to support Limestone #364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## unreleased

### create, template

* Updated `@enact/template-limestone` dependency.

## 7.0.0-alpha.4 (January 17, 2025)

* Updated all dependencies to the latest including React 19.
Expand Down
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ The @enact/cli tool will check the project's **package.json** looking for an opt
* `isomorphic` _[string]_ - Alternate filepath to a custom isomorphic-compatible entry point. Not needed if main entry point is already isomorphic-compatible.
* `title` _[string]_ - Title text that should be put within the HTML's `<title></title>` tags. Note: if this is a webOS-project, the title will, by default, be auto-detected from the **appinfo.json** content.
* `alias` _[object]_ - String mapping of webpack alias paths to use when building.
* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"sandstone"`.
* `fontGenerator` _[string]_ - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to sandstone.
* `ri` _[object]_ - Resolution independence options to be forwarded to the [postcss-resolution-independence](https://github.com/enactjs/postcss-resolution-independence). By default, will use any preset for a specified theme or fallback to sandstone.
* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"limestone"`.
* `fontGenerator` _[string]_ - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to limestone.
* `ri` _[object]_ - Resolution independence options to be forwarded to the [postcss-resolution-independence](https://github.com/enactjs/postcss-resolution-independence). By default, will use any preset for a specified theme or fallback to limestone.
* `baseSize` _[number]_ - The root font-size to use when converting the value of the base unit to a resolution-independent unit. For example, when `baseSize` is set to 24, 48px in the LESS file will be converted to 2rem.
* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions. By default, will use any preset for a specified theme or fallback to sandstone.
* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions. By default, will use any preset for a specified theme or fallback to limestone.
* `nodeBuiltins` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/).
* `resolveFallback` _[object]_ - Configuration settings for redirecting module requests when normal resolving fails. See `resolve.fallback` [webpack option](https://webpack.js.org/configuration/resolve/#resolvefallback).
* `externalStartup` _[boolean]_ - Flag whether to externalize the startup/update js that is normally inlined within prerendered app HTML output.
Expand All @@ -82,7 +82,7 @@ For example:
{
...
"enact": {
"theme": "sandstone",
"theme": "limestone",
"resolveFallback": {
fs: false,
net: false,
Expand Down
4 changes: 2 additions & 2 deletions commands/create.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const validatePackageName = require('validate-npm-package-name');
let chalk;

const ENACT_DEV_NPM = '@enact/cli';
const INCLUDED = path.dirname(require.resolve('@enact/template-sandstone'));
const INCLUDED = path.dirname(require.resolve('@enact/template-limestone'));
const TEMPLATE_DIR = path.join(process.env.APPDATA || os.homedir(), '.enact');

const defaultGenerator = {
Expand Down Expand Up @@ -171,7 +171,7 @@ function resolveTemplateGenerator(template) {
return new Promise((resolve, reject) => {
let templatePath = path.join(TEMPLATE_DIR, template);
if (!fs.existsSync(templatePath)) {
if (['default', 'sandstone'].includes(template)) {
if (['default', 'limestone'].includes(template)) {
templatePath = path.join(INCLUDED, 'template');
} else {
reject(new Error(`Template ${chalk.bold(template)} not found.`));
Expand Down
8 changes: 4 additions & 4 deletions commands/template.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const tar = require('tar');
let chalk;

const TEMPLATE_DIR = path.join(process.env.APPDATA || os.homedir(), '.enact');
const INCLUDED = path.dirname(require.resolve('@enact/template-sandstone'));
const INCLUDED = path.dirname(require.resolve('@enact/template-limestone'));
const DEFAULT_LINK = path.join(TEMPLATE_DIR, 'default');

function displayHelp() {
Expand Down Expand Up @@ -71,9 +71,9 @@ function initTemplateArea() {
}
});
}
const init = doLink(path.join(INCLUDED, 'template'), 'sandstone');
const sandstoneLink = path.join(TEMPLATE_DIR, 'sandstone');
return init.then(() => !fs.existsSync(DEFAULT_LINK) && doLink(sandstoneLink, 'default'));
const init = doLink(path.join(INCLUDED, 'template'), 'limestone');
const limestoneLink = path.join(TEMPLATE_DIR, 'limestone');
return init.then(() => !fs.existsSync(DEFAULT_LINK) && doLink(limestoneLink, 'default'));
}

function doInstall(target, name) {
Expand Down
6 changes: 3 additions & 3 deletions docs/building-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ For all projects built with Enact CLI, `core-js` polyfill is automatically inclu

However keep in mind that `core-js` is solely for ECMAScript and does not polyfill any browser features. Features like this will need to be manually polyfilled in projects with app-level imports. For example, to add web animation API, you could add the NPM dependency [`web-animations-js`](https://github.com/web-animations/web-animations-js) and import it at the top of your app's root **`index.js`** source file.

Note: Some ui libraries, like Sandstone, may have their own recommended supported browsers and may differ from the core Enact framework.
Note: Some ui libraries, like Limestone, may have their own recommended supported browsers and may differ from the core Enact framework.

## \_\_DEV\_\_ Keyword
In order to make development and debugging simpler, the enact cli supports a special `__DEV__` keyword in both javascript and LESS.
Expand Down Expand Up @@ -206,7 +206,7 @@ export NODE_PATH=/path/to/your/global/node_modules

## Custom Skin Support

Sandstone supports custom skin features to let you easily override the colors of components. All you need to do is build your app with `--custom-skin` option and add a CSS file named `custom_skin.css` which includes a preset of colors, under the `customizations` folder in the build result like below.
Limestone supports custom skin features to let you easily override the colors of components. All you need to do is build your app with `--custom-skin` option and add a CSS file named `custom_skin.css` which includes a preset of colors, under the `customizations` folder in the build result like below.

```none
my-app/
Expand All @@ -227,7 +227,7 @@ my-app/

## Build without Effects

To accommodate devices with lower performance, the Enact CLI offers the `--no-animation` option. This option disables animations and graphical effects, including shadows. When activated, it sets the `ENACT_PACK_NO_ANIMATION` environment variable. This variable allows UI libraries like Sandstone to conditionally disable effects. Additionally, you can leverage this variable in your application to achieve the same outcome. Thus, you can develop an app devoid of these effects and do so without modifying your codebase.
To accommodate devices with lower performance, the Enact CLI offers the `--no-animation` option. This option disables animations and graphical effects, including shadows. When activated, it sets the `ENACT_PACK_NO_ANIMATION` environment variable. This variable allows UI libraries like Limestone to conditionally disable effects. Additionally, you can leverage this variable in your application to achieve the same outcome. Thus, you can develop an app devoid of these effects and do so without modifying your codebase.

## Caching

Expand Down
2 changes: 1 addition & 1 deletion docs/isomorphic-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Within your **package.json** file, add an `isomorphic` property to the `enact` o
...
}
```
If the value is a string filepath instead, it will use that file as the main app entry point instead of the default. Whatever the entry point, ensure it exports the `ReactElement` in non-browser environments. Additionally, ensure the entry point also conditionally renders to to the DOM if the `window` is available. An example **index.js** entry point can be see [here](https://github.com/enactjs/templates/blob/master/packages/sandstone/template/src/index.js) and is the default included in the Enact app template.
If the value is a string filepath instead, it will use that file as the main app entry point instead of the default. Whatever the entry point, ensure it exports the `ReactElement` in non-browser environments. Additionally, ensure the entry point also conditionally renders to to the DOM if the `window` is available. An example **index.js** entry point can be see [here](https://github.com/enactjs/templates/blob/master/packages/limestone/template/src/index.js) and is the default included in the Enact app template.

Then, you can choose to build with isomorphic code layout by adding the `--isomorphic` flag to the pack command:
```bash
Expand Down
12 changes: 6 additions & 6 deletions docs/starting-a-new-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@ order: 2
-local Include @enact/cli locally in the project
-verbose Verbose output logging
```
This will generate a basic app based on the Sandstone project template, complete with Enact libraries, React, and a fully configured **package.json**.
This will generate a basic app based on the Limestone project template, complete with Enact libraries, React, and a fully configured **package.json**.

## Enact Project Settings
The @enact/cli tool will check the project's **package.json** looking for an optional `enact` object for a few customization options:

* `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).
* `isomorphic` _[string]_ - Alternate filepath to a custom isomorphic-compatible entry point. Not needed if main entry point is already isomorphic-compatible.
* `title` _[string]_ - Title text that should be put within the HTML's `<title></title>` tags. Note: if this is a webOS-project, the title will, by default, be auto-detected from the **appinfo.json** content.
* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"sandstone"`.
* `fontGenerator` _[string]_ - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to sandstone.
* `ri` _[object]_ - Resolution independence options to be forwarded to the [postcss-resolution-independence](https://github.com/enactjs/postcss-resolution-independence). By default, will use any preset for a specified theme or fallback to sandstone.
* `theme` _[object]_ - A simplified string name to extrapolate `fontGenerator`, `ri`, and `screenTypes` preset values from. For example, `"limestone"`.
* `fontGenerator` _[string]_ - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to limestone.
* `ri` _[object]_ - Resolution independence options to be forwarded to the [postcss-resolution-independence](https://github.com/enactjs/postcss-resolution-independence). By default, will use any preset for a specified theme or fallback to limestone.
* `baseSize` _[number]_ - The root font-size to use when converting the value of the base unit to a resolution-independent unit. For example, when `baseSize` is set to 24, 48px in the LESS file will be converted to 2rem.
* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions. By default, will use any preset for a specified theme or fallback to sandstone.
* `screenTypes` _[array|string]_ - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions. By default, will use any preset for a specified theme or fallback to limestone.
* `nodeBuiltins` _[object]_ - Configuration settings for polyfilling NodeJS built-ins. See `node` [webpack option](https://webpack.js.org/configuration/node/).
* `resolveFallback` _[object]_ - Configuration settings for redirecting module requests when normal resolving fails. See `resolve.fallback` [webpack option](https://webpack.js.org/configuration/resolve/#resolvefallback).
* `externalStartup` _[boolean]_ - Flag whether to externalize the startup/update js that is normally inlined within prerendered app HTML output.
Expand All @@ -42,7 +42,7 @@ For example:
{
...
"enact": {
"theme": "sandstone",
"theme": "limestone",
"resolveFallback": {
fs: false,
net: false,
Expand Down
2 changes: 1 addition & 1 deletion docs/template-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ order: 9
enact template list
List all templates installed/linked
```
An Enact Sandstone template is included within the Enact CLI as the default template. Additional templates can be downloaded or created as needed.
An Enact Limestone template is included within the Enact CLI as the default template. Additional templates can be downloaded or created as needed.

## `install` vs `link`
Due to the similar nature in these actions, it's worth some clarification. The `install` action pulls from a local or remote source, copying the template files to a user-storage location (`%APPDATA%\.enact` on Windows, `$HOME/.enact` on all other systems). The `link` action, on the other hand, will create a symlink from a local source directory into the user-storage location. No files are physically copied, only linked. As such, the local linked source directory should not be deleted and any changes made within it will be available the next time a template is used. It is generally only advisable to use the `link` action when actively developing templates.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"dependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.26.3",
"@enact/dev-utils": "^7.0.0-alpha.3",
"@enact/template-sandstone": "^3.0.0-alpha.1",
"@enact/template-limestone": "^1.0.0-alpha.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
Expand Down