npm - create-liferay-react-cx - Versions diffs - 1.0.2 → 1.0.3 - Mend

create-liferay-react-cx 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -1,267 +1,80 @@
-# create-liferay-react-cx
-> ⚡ Zero-config CLI scaffold for **Liferay React Client Extensions** (custom element type).
-> Powered by [Vite](https://vitejs.dev/) · Compatible with **Liferay 7.4 / DXP 2024.Q1+**
-[![npm version](https://img.shields.io/npm/v/create-liferay-react-cx?color=8B5CF6&label=npm)](https://www.npmjs.com/package/create-liferay-react-cx)
-[![license](https://img.shields.io/npm/l/create-liferay-react-cx?color=8B5CF6)](./LICENSE)
-[![node](https://img.shields.io/node/v/create-liferay-react-cx?color=8B5CF6)](https://nodejs.org)
----
-## Table of Contents
-- [What is a Liferay Client Extension?](#what-is-a-liferay-client-extension)
-- [Requirements](#requirements)
-- [Quick Start](#quick-start)
-- [All Ways to Use This CLI](#all-ways-to-use-this-cli)
-  - [Method 1 — npm create (Recommended)](#method-1--npm-create-recommended)
-  - [Method 2 — npx (No Install)](#method-2--npx-no-install)
-- [Options & Flags](#options--flags)
-- [Interactive Mode](#interactive-mode)
-- [Generated Project Structure](#generated-project-structure)
-- [Development Workflow](#development-workflow)
-- [React Version Compatibility](#react-version-compatibility)
-- [Contributing](#contributing)
-- [License](#license)
----
-## What is a Liferay Client Extension?
-A **Client Extension (CE)** is the modern, decoupled way to extend Liferay DXP / Community Edition — no Java, no OSGi, no portal restarts required.
-A **Custom Element** CE wraps your React app as a standard Web Component (`<my-widget />`), which Liferay embeds directly on any page. This CLI scaffolds everything you need to build, preview, and deploy one in seconds.
----
-## Requirements
-Before you start, make sure you have:
-| Requirement | Version |
-|---|---|
-| Node.js | ≥ 18.0.0 |
-| npm | ≥ 9.0.0 |
-| [Liferay Workspace](https://learn.liferay.com/dxp/latest/en/building-applications/tooling/liferay-workspace/what-is-liferay-workspace.html) | For `gradlew deploy` |
-> **Note:** The generated project must sit inside a Liferay Workspace at `[workspace]/client-extensions/my-widget/` for Gradle deployment to work.
----
-## Quick Start
-```bash
-npx create-liferay-react-cx my-widget
-cd my-widget
-../../gradlew deploy
-```
-That's it. Your custom element is live in Liferay. 🚀
----
-## All Ways to Use This CLI
-### Method 1 — `npm create` (Recommended)
-`npm create` is the standard npm convention for scaffolding tools (like `npm create vite`, `npm create react-app`). It automatically resolves `create-liferay-react-cx` under the hood.
-**With a project name (fastest):**
-```bash
-npm create liferay-react-cx my-widget
-```
-**With a specific React version:**
-```bash
-npm create liferay-react-cx -- --name my-widget --react-version 18.2.0
-```
-> ⚠️ Note the `--` before flags — this is required when using `npm create` with named options, so npm passes them through to the CLI correctly.
-**Interactive wizard (no arguments):**
-```bash
-npm create liferay-react-cx
-```
----
-### Method 2 — `npx` (No Install)
-Use `npx` to run the CLI directly without installing anything globally. The full package name `create-liferay-react-cx` is used here.
-**With a project name:**
-```bash
-npx create-liferay-react-cx my-widget
-```
-**With a specific React version:**
-```bash
-npx create-liferay-react-cx --name my-widget --react-version 18.2.0
-```
-**Interactive wizard:**
-```bash
-npx create-liferay-react-cx
-```
----
-## Options & Flags
-| Flag | Short | Description | Default |
-|------|-------|-------------|---------|
-| `--name` | `-n` | App name in **kebab-case** | _(prompted)_ |
-| `--react-version` | `-r` | React version to scaffold with | `16.12.0` |
-| `--help` | `-h` | Print help and exit | — |
-| `--version` | `-v` | Print version and exit | — |
-**App name rules:** lowercase letters, numbers, and hyphens only. Must start with a letter. Examples: `my-widget`, `employee-portal`, `news-feed`.
----
-## Interactive Mode
-Run the CLI with no arguments to enter the interactive wizard:
-```bash
-npx create-liferay-react-cx
-# or
-npm create liferay-react-cx
-```
-You will be asked:
-1. **App name** — enter a kebab-case name for your widget
-2. **React version** — choose from a list or enter a custom version:
-   - `16.12.0` — Liferay 7.4 / DXP classic
-   - `18.2.0` — Liferay 7.4 U45+ / DXP 2024.Q1+
-   - `Custom` — enter any valid semver (e.g. `17.0.2`)
-3. **Install dependencies now?** — yes/no confirm
----
-## Generated Project Structure
-Running the CLI creates the following layout:
-```
-my-widget/
-├── client-extension.yaml     ← Liferay CE descriptor (auto-configured)
-├── index.html                ← Vite dev-server entry point
-├── package.json              ← Project dependencies & scripts
-├── vite.config.js            ← Vite build config
-├── eslint.config.js          ← ESLint flat config
-└── src/
-    ├── main.jsx              ← Web Component registration (HTMLElement)
-    ├── App.jsx               ← Your React component — start editing here
-    ├── index.css             ← Global reset (shadow DOM scoped)
-    └── assets/
-        └── style.css         ← Component styles (shadow DOM isolated)
-```
-### What `client-extension.yaml` does
-This file tells Liferay how to register and display your widget:
-```yaml
-my-widget:
-  type: customElement          # renders as <my-widget> on Liferay pages
-  htmlElementName: my-widget   # the HTML tag name
-  urls:
-    - assets/*.js              # built JS bundle from vite-build/
-  cssURLs:
-    - assets/*.css             # built CSS bundle from vite-build/
-  useESM: true                 # ES module support
-  instanceable: false          # one instance per page
-  portletCategoryName: category.client-extensions
-```
-All values are automatically replaced with your app name during scaffolding.
----
-## Development Workflow
-### ✅ Deploying to Liferay (Standard Workflow)
-When working inside a Liferay Workspace, **you only need one command**. Gradle handles the npm install, Vite build, and deployment automatically — no manual `npm run build` needed.
-**1. Navigate into your project:**
-```bash
-cd my-widget
-```
-**2. Deploy directly to Liferay** (from the Liferay Workspace root):
-```bash
-../../gradlew deploy
-```
-That's it. Under the hood, Gradle will:
-- Run `npm install` (if `node_modules` is missing)
-- Run `npm run build` (Vite compiles to `vite-build/`)
-- Copy the output into Liferay's deploy folder
-- Hot-reload the bundle in your running Liferay instance
-> After deployment, go to **Liferay Admin → Fragments and Resources → Client Extensions** to find and add your widget to a page.
----
-### 🖥️ Local Preview (Optional)
-If you want to preview your React component in a browser **outside of Liferay** during development (faster feedback, hot reload), you can use Vite's dev server:
-```bash
-npm install       # only needed once
-npm run dev       # starts at http://localhost:5173
-```
-> This is purely optional and useful for rapid UI development. The component will render standalone — not inside Liferay's portal context.
----
-## React Version Compatibility
-| React Version | Liferay Compatibility | Notes |
-|:---:|:---|:---|
-| `16.12.0` | Liferay 7.4 GA / DXP classic | Uses Liferay's bundled React. Smaller bundle. |
-| `18.2.0` | Liferay 7.4 U45+ / DXP 2024.Q1+ | Fully isolated in shadow DOM. Concurrent features. |
-Not sure which to pick? Use `16.12.0` for maximum compatibility with older Liferay instances, or `18.2.0` for newer deployments that support isolated client extensions.
----
-## Contributing
-Contributions, issues, and feature requests are welcome!
-```bash
-# 1. Clone the repo
-git clone https://github.com/laxitkhanpara/liferay-react-ce.git
-cd liferay-react-cx
-# 2. Install dependencies
-npm install
-# 3. Test locally
-node bin/index.js my-test-app
-# 4. Clean up
-rm -rf my-test-app
-```
-Please open an [issue](https://github.com/laxitkhanpara/liferay-react-ce/issues) first to discuss any significant changes.
----
-## License
-[MIT](./LICENSE) © [Laxit Khanpara](https://github.com/laxitkhanpara)
----
-## Links
-- 📦 [npm package](https://www.npmjs.com/package/create-liferay-react-cx)
-- 🐛 [Report a bug](https://github.com/laxitkhanpara/liferay-react-ce/issues)
-- 📖 [Liferay Client Extensions docs](https://learn.liferay.com/dxp/latest/en/building-applications/client-extensions.html)
-- 🏗️ [Liferay Workspace docs](https://learn.liferay.com/dxp/latest/en/building-applications/tooling/liferay-workspace/what-is-liferay-workspace.html)
+# create-liferay-react-cx
+⚡ **Zero-config CLI** to scaffold **Liferay React Client Extensions** in seconds.
+[![npm version](https://img.shields.io/npm/v/create-liferay-react-cx)](https://www.npmjs.com/package/create-liferay-react-cx)
+[![license](https://img.shields.io/npm/l/create-liferay-react-cx)](https://github.com/laxitkhanpara/create-liferay-react-cx/blob/main/LICENSE)
+---
+## Quick Start
+```bash
+npx create-liferay-react-cx my-widget
+cd my-widget
+../../gradlew deploy
+```
+## What You Get
+- ✅ **Vite-powered** React project (fast builds, HMR)
+- ✅ **client-extension.yaml** pre-configured
+- ✅ **Shadow DOM** isolated styles
+- ✅ **Ready to deploy** to Liferay 7.4+ / DXP
+## Usage
+### Interactive Mode
+```bash
+npx create-liferay-react-cx
+```
+### With Arguments
+```bash
+npx create-liferay-react-cx my-widget --react-version 18.2.0
+```
+### Using npm create
+```bash
+npm create liferay-react-cx my-widget
+```
+## Options
+| Flag | Description | Default |
+|------|-------------|---------|
+| `--name, -n` | App name (kebab-case) | _(prompted)_ |
+| `--react-version, -r` | React version | `16.12.0` |
+| `--help, -h` | Show help | — |
+| `--version, -v` | Show version | — |
+## Requirements
+- **Node.js** ≥ 18.0.0
+- **npm** ≥ 9.0.0
+- **Liferay Workspace** (for deployment)
+## React Version Guide
+- **16.12.0** → Liferay 7.4 GA / DXP classic
+- **18.2.0** → Liferay 7.4 U45+ / DXP 2024.Q1+
+## After Scaffolding
+1. Navigate into your project: `cd my-widget`
+2. Deploy to Liferay: `../../gradlew deploy`
+3. Add widget to a page in **Liferay Admin → Client Extensions**
+## Documentation
+📖 Full documentation: [GitHub Repository](https://github.com/laxitkhanpara/create-liferay-react-cx)
+## Links
+- [GitHub](https://github.com/laxitkhanpara/create-liferay-react-cx)
+- [Issues](https://github.com/laxitkhanpara/create-liferay-react-cx/issues)
+- [Liferay Docs](https://learn.liferay.com/dxp/latest/en/building-applications/client-extensions.html)
+## License
+MIT © [Laxit Khanpara](https://github.com/laxitkhanpara)

package/bin/index.js CHANGED Viewed

@@ -12,7 +12,7 @@ const __dirname = path.dirname(__filename);
 const commandName = 'create-liferay-react-cx';
-const PKG_VERSION = '1.0.2';
+const PKG_VERSION = '1.0.3';
 // ─── Helpers ────────────────────────────────────────────────────────────────

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-liferay-react-cx",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Zero-config CLI to scaffold Liferay React Client Extensions (custom element) — Vite-powered, shadow DOM isolated, ready to deploy.",
   "type": "module",
   "main": "./bin/index.js",