Skip to content

Commit

Permalink
Fix #1164 POC: Render using a single catchAll siteMapping
Browse files Browse the repository at this point in the history
  • Loading branch information
ComLock committed Nov 7, 2024
1 parent 0b9601a commit 6ada13c
Show file tree
Hide file tree
Showing 31 changed files with 24,448 additions and 5,487 deletions.
5 changes: 4 additions & 1 deletion build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,15 @@ dependencies {
//include "com.enonic.xp:lib-io:${xpVersion}"
//include "com.enonic.xp:lib-mail:${xpVersion}"
//include "com.enonic.xp:lib-repo:${xpVersion}"
include "com.enonic.xp:lib-schema:${xpVersion}"
//include "com.enonic.xp:lib-websocket:${xpVersion}"

// The version numbers must be here (or dependabot will fail)
include 'com.enonic.lib:lib-thymeleaf:2.1.1'
include 'com.enonic.lib:lib-guillotine:6.2.1'
include 'com.enonic.lib:lib-react4xp:5.1.1'

// include 'com.enonic.lib:lib-react4xp:5.1.1'
include 'com.enonic.lib:lib-react4xp:5.1.2-SNAPSHOT'
}

sourceSets {
Expand Down
9,089 changes: 3,874 additions & 5,215 deletions package-lock.json

Large diffs are not rendered by default.

10 changes: 4 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
],
"dependencies": {
"@enonic/js-utils": "^1",
"@enonic/react-components": "5.0.0",
"@enonic/react-components": "file:../npm-react-components",
"cross-env": "^7.0.3",
"dayjs": "^1.11.13",
"node-fetch": "^3",
Expand Down Expand Up @@ -61,7 +61,7 @@
"@enonic-types/lib-value": "^7",
"@enonic-types/lib-vhost": "^7",
"@enonic-types/lib-websocket": "^7",
"@enonic/react4xp": "^5.0.4",
"@enonic/react4xp": "file:../npm-react4xp",
"@swc/core": "^1",
"@types/react": "^18",
"babel": "^6",
Expand All @@ -73,13 +73,11 @@
"mini-css-extract-plugin": "^2",
"npm-run-all": "^4",
"rimraf": "^6",
"sass": "^1",
"sass": "^1.80.5",
"sass-loader": "^16",
"tslib": "^2",
"tsup": "^8",
"typescript": "^5",
"webpack": "^5",
"webpack-cli": "^5"
"typescript": "^5"
},
"homepage": "https://github.com/enonic/starter-react4xp#readme",
"license": "Apache-2.0",
Expand Down
168 changes: 84 additions & 84 deletions react4xp.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,99 +9,99 @@

module.exports = {

//──────────────────────────────────────────────────────────────────────────
// ENTRIES AND CHUNKING:
//──────────────────────────────────────────────────────────────────────────
//──────────────────────────────────────────────────────────────────────────
// ENTRIES AND CHUNKING:
//──────────────────────────────────────────────────────────────────────────

// If nothing is added below, this is the default behaviour:
// - Default entry source folder is /site/,
// that is: src/main/resources/site/ and its subfolders.
// - Everything under react4xp root folder (src/main/resources/react4xp/)
// will be considered chunks and will be bundled by webpack into a single
// dependency imported by webpack: react4xp.<contenthash>.js
// - Everything under the react4xp root folder
// (src/main/resources/react4xp/) will be considered non-entries: added
// files here can be imported by react4xp entries, but otherwise
// unreachable from react4xp.
// - Default entryExtensions (file extensions to look for when finding
// entries under OTHER entryDirs than /site/) are: jsx, js, tsx, ts, es6,
// es
// If nothing is added below, this is the default behaviour:
// - Default entry source folder is /site/,
// that is: src/main/resources/site/ and its subfolders.
// - Everything under react4xp root folder (src/main/resources/react4xp/)
// will be considered chunks and will be bundled by webpack into a single
// dependency imported by webpack: react4xp.<contenthash>.js
// - Everything under the react4xp root folder
// (src/main/resources/react4xp/) will be considered non-entries: added
// files here can be imported by react4xp entries, but otherwise
// unreachable from react4xp.
// - Default entryExtensions (file extensions to look for when finding
// entries under OTHER entryDirs than /site/) are: jsx, js, tsx, ts, es6,
// es


// chunkDirs are folder names where importable, non-entry code is kept.
// Comma-separated list of folder names, relative to
// src/main/resources/react4xp/. Each folder added here will be bundled by
// webpack into a separate dependency chunk with the same name as the
// folder, and a hash: <foldername>.<contenthash>.js. This is good for
// grouping sets of dependencies that belong together, or will frequently
// be requested from the client together in some parts of a web page but
// not others, etc. The react4xp root (src/main/resources/react4xp/) is the
// standard chunk 'react4xp', but you can add subfolders here to bundle
// them (and their subfolders) in separate chunks. Or you can add relative
// paths to the react4xp root to imported dependency code from elsewhere.
// Don't overlap with entryDirs or /site/.
//
// chunkDirs: [''],
// chunkDirs are folder names where importable, non-entry code is kept.
// Comma-separated list of folder names, relative to
// src/main/resources/react4xp/. Each folder added here will be bundled by
// webpack into a separate dependency chunk with the same name as the
// folder, and a hash: <foldername>.<contenthash>.js. This is good for
// grouping sets of dependencies that belong together, or will frequently
// be requested from the client together in some parts of a web page but
// not others, etc. The react4xp root (src/main/resources/react4xp/) is the
// standard chunk 'react4xp', but you can add subfolders here to bundle
// them (and their subfolders) in separate chunks. Or you can add relative
// paths to the react4xp root to imported dependency code from elsewhere.
// Don't overlap with entryDirs or /site/.
//
// chunkDirs: [''],


// entryDirs are additional folder names where webpack will look for entry
// files. Comma-separated list of folder names, relative to
// src/main/resources/react4xp/. By default, react4xp instructs webpack to
// look for entries under src/main/resources/site/ (and in the
// react4xp-templates package). Added folders here will be kept out of
// bundled dependency chunks (take care to avoid directory overlaps with
// chunkDirs) and treated separately. Files in them will be compiled into
// react4xp entries, which most importantly get a jsxPath (relative to their
// entryDir not relative to /react4xp/) and therefore are available to
// react4xp overrideComponentWebpack file (see above).
//
// For compatibility with earlier versions of react4xp, add _entries here.
//
// entryDirs: [''],
// entryDirs are additional folder names where webpack will look for entry
// files. Comma-separated list of folder names, relative to
// src/main/resources/react4xp/. By default, react4xp instructs webpack to
// look for entries under src/main/resources/site/ (and in the
// react4xp-templates package). Added folders here will be kept out of
// bundled dependency chunks (take care to avoid directory overlaps with
// chunkDirs) and treated separately. Files in them will be compiled into
// react4xp entries, which most importantly get a jsxPath (relative to their
// entryDir not relative to /react4xp/) and therefore are available to
// react4xp overrideComponentWebpack file (see above).
//
// For compatibility with earlier versions of react4xp, add _entries here.
//
entryDirs: ['entries'],


// entryExtensions are filename extensions of files (comma-separated list)
// below the entryDirs folders that webpack should look for and turn into
// entries. NOTE that this doesn't apply to the default entry-folder
// src/main/resources/site/ (or the react4xp-templates package), where ONLY
// .jsx (and .tsx) files can be entries. This is to avoid mixups with XP
// controllers etc, which can be .js or .es6. Default value if not changed
// is jsx,js,tsx,ts,es6,es. Also note that tsx/ts files are NOT supported
// out of the box. Rules for typescript compilation must be added in your
// own.
//
// entryExtensions: ['jsx', 'js', 'tsx', 'ts', 'es6', 'es'],
// entryExtensions are filename extensions of files (comma-separated list)
// below the entryDirs folders that webpack should look for and turn into
// entries. NOTE that this doesn't apply to the default entry-folder
// src/main/resources/site/ (or the react4xp-templates package), where ONLY
// .jsx (and .tsx) files can be entries. This is to avoid mixups with XP
// controllers etc, which can be .js or .es6. Default value if not changed
// is jsx,js,tsx,ts,es6,es. Also note that tsx/ts files are NOT supported
// out of the box. Rules for typescript compilation must be added in your
// own.
//
// entryExtensions: ['jsx', 'js', 'tsx', 'ts', 'es6', 'es'],

// entryExtensionWhitelist: [
// 'css',
// 'd',
// 'sass',
// 'scss',
// 'styl'
// ],
// entryExtensionWhitelist: [
// 'css',
// 'd',
// 'sass',
// 'scss',
// 'styl'
// ],

//────────────────────────────────────────────────────────────────────────────
// Globals & Externals:
//────────────────────────────────────────────────────────────────────────────
// React4xp builds a globals bundle, which MUST contain all assets NEEDED to
// render server-side. By default it contains react and react-dom, but more
// assets can be added here:
globals: {
// lodash: '_'
},
//────────────────────────────────────────────────────────────────────────────
// Globals & Externals:
//────────────────────────────────────────────────────────────────────────────
// React4xp builds a globals bundle, which MUST contain all assets NEEDED to
// render server-side. By default it contains react and react-dom, but more
// assets can be added here:
globals: {
// lodash: '_'
},

// By default the globals bundle is also used on the client-side, but you
// can provide the REQUIRED assets on your own, for example via CDN.
//
// To disable serving the globals bundle to the client-side add this line to
// $XP_HOME/config/appname.cfg:
// react4xp.serveGlobals = false
// By default the globals bundle is also used on the client-side, but you
// can provide the REQUIRED assets on your own, for example via CDN.
//
// To disable serving the globals bundle to the client-side add this line to
// $XP_HOME/config/appname.cfg:
// react4xp.serveGlobals = false

// It's possible to have pure client-side rendered components in React4xp.
// If these components use assets which are NOT needed to render server-side
// you can add them here:
externals: {
// jquery: 'jQuery'
},
// It's possible to have pure client-side rendered components in React4xp.
// If these components use assets which are NOT needed to render server-side
// you can add them here:
externals: {
// jquery: 'jQuery'
},

}; // module.exports
}; // module.exports
30 changes: 30 additions & 0 deletions src/main/resources/react4xp/DefaultPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// TODO 7.15.0-B1 release of @enonic-types/core
// import type {Region} from '@enonic-types/core';
// import type {ComponentRegistry} from '@enonic/react-components';

// import './default.sass'; // Create Error reference failed
import { toStr } from '@enonic/js-utils/value/toStr';
import {
ComponentRegistry,
XpRegions
} from '@enonic/react-components';
import dayjs from 'dayjs';


export interface DefaultPageProps {
componentRegistry?: ComponentRegistry;
// regions: Record<string, Region>;
regions: Record<string, unknown>;
}


export function DefaultPage(props: DefaultPageProps) {
// console.info('DefaultPage props:', toStr(props));
return (
<div className="default-page">
{/* @ts-ignore */}
<XpRegions {...props} />
<div>Page: {dayjs().format()}</div>
</div>
);
}
31 changes: 31 additions & 0 deletions src/main/resources/react4xp/ExamplePart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import type {
ComponentRegistry,
RichTextData
} from '@enonic/react-components';

// import './example.sass';
import * as React from 'react';
import {RichText} from '@enonic/react-components';

export interface ExampleProps {
data: RichTextData;
componentRegistry?: ComponentRegistry;
}

export function ExamplePart({
componentRegistry,
data
}: ExampleProps) {
// console.info('ExamplePart data', data);
if (!data) {
return <div>Example Part: Please fill in the htmlArea.</div>;
}
return (
<div data-portal-component-type="part">
<RichText
componentRegistry={componentRegistry}
data={data}
/>
</div>
);
}
13 changes: 13 additions & 0 deletions src/main/resources/react4xp/InfoPanel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from 'react';

export interface InfoPanelProps {
body: string
header: string
}

export function InfoPanel({
body,
header,
}: InfoPanelProps) {
return <div className="macro-panel macro-panel-info macro-panel-styled"><i className="icon"></i><strong>{header}</strong>{body}</div>;
}
35 changes: 35 additions & 0 deletions src/main/resources/react4xp/TwoColumnsLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// TODO 7.15.0-B1 release of @enonic-types/core
// import type {Region} from '@enonic-types/core';
import type {ComponentRegistry} from '@enonic/react-components';

import { toStr } from '@enonic/js-utils/value/toStr';
import {XpRegions} from '@enonic/react-components';
import * as React from 'react';
// import dayjs from 'dayjs';

export interface TwoColumnsLayoutProps {
componentRegistry?: ComponentRegistry;
// regions: Record<string, Region>;
regions: Record<string, unknown>;
}

export function TwoColumnsLayout (props: TwoColumnsLayoutProps) {
console.debug('TwoColumnsLayout props:', toStr(props));
const regionsProps = {
componentRegistry: props.componentRegistry,
regions: props.regions
};
console.debug('TwoColumnsLayout regionsProps:', toStr(regionsProps));
return <div data-portal-component-type="layout">
<div style={{
columnGap: '1em',
display: 'grid',
gridTemplateColumns: '1fr 1fr'
}}>
{/* @ts-ignore */}

<XpRegions {...regionsProps}/>
{/* <div>Layout: {dayjs().format()}</div> */}
</div>
</div>;
}
37 changes: 37 additions & 0 deletions src/main/resources/react4xp/entries/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// import { toStr } from '@enonic/js-utils/value/toStr';
import {ComponentRegistry} from '@enonic/react-components';
import * as React from 'react';

import {DefaultPage} from '../DefaultPage';
import {TwoColumnsLayout} from '../TwoColumnsLayout';
import {ExamplePart} from '../ExamplePart';
import {InfoPanel} from '../InfoPanel';
import {XpComponent} from '@enonic/react-components';


const componentRegistry = new ComponentRegistry;

componentRegistry.addPage('com.enonic.app.react4xp:default', {
View: DefaultPage
});

componentRegistry.addLayout('com.enonic.app.react4xp:twoColumns', {
View: TwoColumnsLayout
});

componentRegistry.addPart('com.enonic.app.react4xp:example', {
View: ExamplePart
});

componentRegistry.addMacro('info', {
View: InfoPanel
});


export default (props) => {
props.componentRegistry = componentRegistry;
// console.info('App props sent to XpComponent:', toStr(props));
return (
<XpComponent {...props}/>
);
}
Loading

0 comments on commit 6ada13c

Please sign in to comment.