CCM NG: Basic integration of NPM modules and Maven build system

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5461 8810af33-2d31-482b-a856-94f89814c4df

ccm-cms-js/package.json

@@ -8,24 +8,23 @@
     },
     "author": "Jens Pelzetter",
     "license": "GPL-3.0",
+    "main": "target/dist/ccm-cms-pagemodelseditor.js",
+    "types": "target/dist/ccm-cms-pagemodelseditor.d.ts",
     "scripts": {
-        "build": "webpack",
+        "build": "tsc",
         "tslint": "tslint --project ."
     },
     "dependencies": {
         "react": "^16.3.2",
         "react-dom": "^16.3.2",
         "react-redux": "^5.0.7",
-        "redux": "^4.0.0"
+        "redux": "^4.0.0",
+        "ccm-pagemodelseditor": "7.0.0"
     },
     "devDependencies": {
         "@types/react": "^16.3.14",
         "@types/react-dom": "^16.0.5",
-        "ts-loader": "^4.3.0",
         "tslint": "^5.10.0",
-        "typescript": "^2.8.3",
+        "typescript": "^2.8.3"
-        "webpack": "^4.8.1",
-        "webpack-cli": "^2.1.3",
-        "ccm-pagemodelseditor": "^7.0.0-SNAPSHOT"
     }
 }

ccm-cms-js/pom.xml

@@ -57,7 +57,7 @@
 
         <plugins>
 
-            <plugin>
+            <!-- <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-remote-resources-plugin</artifactId>
                 <version>1.5</version>
@@ -73,7 +73,7 @@
                         </goals>
                     </execution>
                 </executions>
-            </plugin>
+            </plugin> -->
 
             <plugin>
                 <groupId>com.github.eirslett</groupId>

ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { render } from "react-dom";
 
-import { PageModelEditor } from "../ccm-pagemodelseditor/PageModelsEditor";
+import { PageModelEditor } from "ccm-pagemodelseditor";
 
 render(
     <PageModelEditor />,
     document.getElementById("cms-content"),
 );
-

ccm-cms-js/tsconfig.json

@@ -1,10 +1,12 @@
 {
     "compilerOptions": {
         "jsx": "React",
-        "module": "amd",
+        "module": "commonjs",
         "moduleResolution": "node",
-        "outDir": "target/generated-resources/dist",
+        "outDir": "target/dist",
         "sourceMap": true,
+        "declaration": true,
+        "strict": true,
         "target": "es6"
     },
     "include": [

ccm-cms-js/webpack.config.js

@@ -1,26 +0,0 @@
-const path = require('path');
-
-module.exports = {
-
-    devtool: "inline-source-map",
-
-    entry: {
-        ccmcms: "./src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx"
-    },
-
-    output: {
-        //path: path.resolve(__dirname, "src/main/resources/dist"),
-        path: path.resolve(__dirname, "target/generated-resources/dist"),
-        filename: "ccm-cms-pagemodelseditor.js"
-    },
-
-    resolve: {
-        extensions: [".webpack.js", "web.js", ".ts", ".tsx", ".js"]
-    },
-
-    module: {
-        rules: [
-            { test: /\.tsx?$/, loader: "ts-loader"}
-        ]
-    }
-};

ccm-pagemodelseditor/package.json

@@ -1,7 +1,8 @@
 {
     "name": "ccm-pagemodelseditor",
-    "version": "7.0.0-SNAPSHOT",
+    "version": "7.0.0",
-    "main": "index.js",
+    "main": "target/dist/PageModelsEditor.js",
+    "types": "target/dist/PageModelsEditor.d.ts",
     "description": "Editor for PageModels build using React.js",
     "repository": {
         "type": "svn",
@@ -22,10 +23,7 @@
     "devDependencies": {
         "@types/react": "^16.3.14",
         "@types/react-dom": "^16.0.5",
-        "ts-loader": "^4.3.0",
         "tslint": "^5.10.0",
-        "typescript": "^2.8.3",
+        "typescript": "^2.8.3"
-        "webpack": "^4.8.1",
-        "webpack-cli": "^2.1.3"
     }
 }

ccm-pagemodelseditor/pom.xml

@@ -46,7 +46,7 @@
 
         <plugins>
 
-            <plugin>
+            <!--<plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-remote-resources-plugin</artifactId>
                 <version>1.5</version>
@@ -64,7 +64,7 @@
                         <include>**/*.tsx</include>
                     </includes>
                 </configuration>
-            </plugin>
+            </plugin>-->
 
             <plugin>
                 <groupId>com.github.eirslett</groupId>

ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx

@@ -2,9 +2,44 @@ import * as React from "react";
 
 export { PageModelEditor };
 
+/**
+ * To render the PageModelEditor create a Typescript file with the following
+ * minimal content:
+ *
+ * import * as React from "react";
+ * import { render } from "react-dom";
+ *
+ * import { PageModelEditor } from "./PageModelsEditor";
+ *
+ * render(
+ *     <PageModelEditor />,
+ *     document.getElementById("cms-content"),
+ * );
+ */
+
 class PageModelEditor extends React.Component<{}, {}> {
 
+    private getCcmApplication(): string {
+
+        const dataElem: HTMLElement | null = document
+            .querySelector("#page-models-editor.react-data");
+
+        if (dataElem === null) {
+            return "???";
+        } else {
+            const value: string | null = dataElem.getAttribute("data-ccm-application");
+            if (value === null) {
+                return "???";
+            } else {
+                return value;
+            }
+        }
+    }
+
     public render() {
+
+
+
         return <React.Fragment>
             <div id="left">
                 <div className="column-head"></div>
@@ -18,7 +53,7 @@ class PageModelEditor extends React.Component<{}, {}> {
                 <div className="column-content">
                     PageModelEditor Placeholder
                     <pre>
-                        {document.querySelector("#page-models-editor.react-data").getAttribute("data-ccm-application")}
+                        {this.getCcmApplication()}
                     </pre>
                 </div>
             </div>

ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/index.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { render } from "react-dom";
-
-import { PageModelEditor } from "./PageModelsEditor";
-
-render(
-    <PageModelEditor />,
-    document.getElementById("cms-content"),
-);
-
-/* "page-models-editor"* */

ccm-pagemodelseditor/tsconfig.json

@@ -1,10 +1,12 @@
 {
     "compilerOptions": {
         "jsx": "React",
-        "module": "amd",
+        "module": "commonjs",
         "moduleResolution": "node",
-        "outDir": "target/generated-resources/dist",
+        "outDir": "target/dist",
+        "declaration": true,
         "sourceMap": true,
+        "strict": true,
         "target": "es6"
     },
     "include": [