feat(html export): add html exporter (#935)

* feat(html export): added basic exporter * feat(html export): resources now inlined * feat(html export): added JS minification * feat(html export): added font stripper * refactor(post css plugin): moved remove fonts to own plugin * test(post css plugin): added tests * refactor(html export): style improvements * refactor(html exporter): improved style * refactor(html exporter): improved style * refactor(html export): parallelized promises * feat(html export): source file licenses added to output * test(html exporter): added tests and fixed errors * feat(html export): added unreferenced resources to export * test(html exporter): moved test to integration * test(html exporter): correct test imports * test(postcss plugin): added test for callback * refactor(html exporter): improved structure and documentation * test(html exporter): activated all tests again * ci(integration tests): added browsers to integration tests * refactor(html export): fixed exports and imports * test(html exporter): fixed improt * refactor(html export): moved dependencies * feat(html export): added option to keep content resources as files
Lumieducation · Dec 20, 2020 · e67ac3d · e67ac3d
1 parent e774898
commit e67ac3d
Show file tree

Hide file tree

Showing 16 changed files with 1,395 additions and 16 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -68,7 +68,7 @@ jobs:
 
     integration-tests:
         docker:
-            - image: circleci/node:10
+            - image: circleci/node:10-browsers
         steps:
             - checkout
             - attach_workspace:

diff --git a/examples/express.ts b/examples/express.ts
@@ -159,6 +159,26 @@ const start = async () => {
         contentTypeCacheExpressRouter(h5pEditor.contentTypeCache)
     );
 
+    const htmlExporter = new H5P.HtmlExporter(
+        h5pEditor.libraryStorage,
+        h5pEditor.contentStorage,
+        h5pEditor.config,
+        path.resolve('h5p/core'),
+        path.resolve('h5p/editor')
+    );
+
+    server.get('/h5p/html/:contentId', async (req, res) => {
+        const html = await htmlExporter.createSingleBundle(
+            req.params.contentId,
+            (req as any).user
+        );
+        res.setHeader(
+            'Content-disposition',
+            `attachment; filename=${req.params.contentId}.html`
+        );
+        res.status(200).send(html);
+    });
+
     // The startPageRenderer displays a list of content objects and shows
     // buttons to display, edit, delete and download existing content.
     server.get('/', startPageRenderer(h5pEditor));

diff --git a/examples/startPageRenderer.ts b/examples/startPageRenderer.ts
@@ -67,6 +67,12 @@ export default function render(
                                             download
                                         </a>
                                     </div>
+                                    <div class="p-2">
+                                        <a class="btn btn-info" href="${editor.config.baseUrl}/html/${content.id}">
+                                            <span class="fa fa-file-download m-1"></span>
+                                            download HTML
+                                        </a>
+                                    </div>
                                     <div class="p-2">
                                         <a class="btn btn-danger" href="${editor.config.baseUrl}/delete/${content.id}">
                                             <span class="fa fa-trash-alt m-1"></span>

diff --git a/jest.config.js b/jest.config.js
@@ -173,7 +173,7 @@ module.exports = {
     // verbose: null,
 
     // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
-    // watchPathIgnorePatterns: [],
+    watchPathIgnorePatterns: ['/node_modules/', '/test/data/', '/h5p/', '/build/'],
 
     // Whether to use watchman for file crawling
     // watchman: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,9 +69,8 @@
         }
     ],
     "dependencies": {
-        "@types/react": "^17.0.0",
-        "ajv": "^7.0.0",
         "ajv-keywords": "^4.0.0",
+        "ajv": "^7.0.0",
         "axios": "^0.21.0",
         "crc": "^3.8.0",
         "debug": "^4.1.1",
@@ -83,11 +82,16 @@
         "merge": "^2.0.0",
         "mime-types": "^2.1.26",
         "nanoid": "^3.1.10",
+        "postcss-clean": "^1.1.0",
+        "postcss-safe-parser": "^5.0.2",
+        "postcss-url": "^10.1.1",
+        "postcss": "^8.1.10",
         "promisepipe": "^3.0.0",
         "qs": "^6.9.3",
         "sanitize-html": "^2.1.1",
         "stream-buffers": "^3.0.2",
         "tmp-promise": "^3.0.0",
+        "uglify-js": "^3.12.0",
         "upath": "^2.0.0",
         "yauzl-promise": "^2.1.3",
         "yazl": "^2.5.1"
@@ -104,21 +108,23 @@
         "@types/mime-types": "2.1.0",
         "@types/mongodb": "3.6.3",
         "@types/puppeteer": "5.4.2",
+        "@types/react": "^17.0.0",
         "@types/sanitize-html": "1.27.0",
         "@types/stream-buffers": "3.0.3",
         "@types/supertest": "2.0.10",
+        "@types/uglify-js": "^3.11.1",
         "@types/yauzl-promise": "2.1.0",
         "@types/yazl": "2.4.2",
         "aws-sdk": "2.814.0",
         "axios-mock-adapter": "1.19.0",
         "body-parser": "1.19.0",
         "commitlint": "11.0.0",
-        "express": "4.17.1",
         "express-fileupload": "1.2.0",
+        "express": "4.17.1",
         "husky": "4.3.6",
-        "i18next": "19.8.4",
         "i18next-fs-backend": "1.0.7",
         "i18next-http-middleware": "3.0.6",
+        "i18next": "19.8.4",
         "jest": "26.6.3",
         "mockdate": "3.0.2",
         "mongodb": "3.6.3",
@@ -131,9 +137,9 @@
         "supertest": "6.0.1",
         "ts-jest": "26.4.4",
         "ts-node": "9.1.1",
-        "tslint": "6.1.3",
         "tslint-config-airbnb": "5.11.2",
         "tslint-config-prettier": "1.18.0",
+        "tslint": "6.1.3",
         "typescript": "4.1.3"
     },
     "main": "./build/src/index.js",

diff --git a/src/H5PPlayer.ts b/src/H5PPlayer.ts
@@ -12,7 +12,8 @@ import {
     ILibraryStorage,
     IPlayerModel,
     IUrlGenerator,
-    ILibraryMetadata
+    ILibraryMetadata,
+    IUser
 } from './types';
 import UrlGenerator from './UrlGenerator';
 import Logger from './helpers/Logger';
@@ -67,7 +68,8 @@ export default class H5PPlayer {
     public async render(
         contentId: ContentId,
         parameters?: ContentParameters,
-        metadata?: IContentMetadata
+        metadata?: IContentMetadata,
+        user?: IUser
     ): Promise<string | any> {
         log.info(`rendering page for ${contentId}`);
 
@@ -130,6 +132,7 @@ export default class H5PPlayer {
 
         const model: IPlayerModel = {
             contentId,
+            dependencies,
             downloadPath: this.getDownloadPath(contentId),
             integration: this.generateIntegration(
                 contentId,
@@ -143,7 +146,8 @@ export default class H5PPlayer {
                 .concat(assets.scripts),
             styles: this.listCoreStyles().concat(assets.styles),
             translations: {},
-            embedTypes: metadata.embedTypes // TODO: check if the library supports the embed type!
+            embedTypes: metadata.embedTypes, // TODO: check if the library supports the embed type!
+            user
         };
 
         return this.renderer(model);