From e0f6ad2bb7aca0548f03d1b39154c008172e2fa5 Mon Sep 17 00:00:00 2001
From: Benedikt Seeger <benedikt.seeger@ptb.de>
Date: Fri, 28 Feb 2025 15:10:26 +0100
Subject: [PATCH] added instructions how to use with cdn
---
README.md | 114 +++++++++---------
...e_dcc_WithExampleConformatyStatmentXLT.xml | 6 +-
package-lock.json | 23 +++-
package.json | 6 +-
src/app.js | 2 +-
vite.config.js | 12 +-
6 files changed, 95 insertions(+), 68 deletions(-)
diff --git a/README.md b/README.md
index 920ba3a..75b4aa8 100644
--- a/README.md
+++ b/README.md
@@ -8,31 +8,11 @@ The application parses a DCC XML file, renders administrative data and measureme
This Library is a proof of concept of the advantages of interactive visualisation of the DCC-XML 3.3.0 Calibration certificates.
There are errors in this code, and many parts missing so far, and it's not guaranteed that all elements are rendered correct or even rendered at all.
-This code is licensed under LGPL-2.1 since we hope to build a more generic libary in the future and sharing it and it's development efforts with the world.
+This code is licensed under MIT since we hope to build a more generic libary in the future and sharing it and it's development efforts with the world.
+## Source Reposity and issue tracker
-
-
-## Project Structure
-
-```
-├── data
-│ ├── 1DTableDataWithRenderingComments.xml # Example XML file with table rendering comments
-│ └── sin_acceleration_example_dcc_WithExampleConformatyStatment.xml # Example DCC XML file
-├── dcc-viewer # (Optional) Output directory for built package
-├── index.html # Main HTML file
-├── package.json # NPM package file
-├── readME.md # This file
-├── src
-│ ├── app.js # Main application module (initializes the app, loads XML, renders UI)
-│ ├── dccQuantity.js # Module for parsing DCC quantities and conformity data
-│ ├── main.js # Entry point – initializes app after DOM loads and loads test XML (for development)
-│ ├── renderers
-│ │ ├── AdminRenderer.js # Renders administrative data (using a JSON tree viewer)
-│ │ ├── MeasurementRenderer.js # Renders measurement results in a tabbed layout with charts, tables, etc.
-│ │ └── SelectRenderer.js # (Optional) For selecting which renderer to use for a given XML section
-│ └── styles.css # Application styling└── vite.config.js # Vite configuration file
-```
+https://gitlab1.ptb.de/Seeger/dccviewer-js
## Features
@@ -50,47 +30,16 @@ This code is licensed under LGPL-2.1 since we hope to build a more generic libar
1. **Clone the Repository:**
```bash
- git clone <repository_url>
+ git clone https://gitlab1.ptb.de/Seeger/dccviewer-js
cd dccviewer-js
```
2. **Install Dependencies:**
```bash
- npm install
- ```
-
-## Development
-
-This project uses [Vite](https://vitejs.dev/) for development.
-
-1. **Start the Development Server:**
-
- ```bash
- npm run dev
+ npm install dccviewer-js
```
- This will start the server (usually on `http://localhost:5173/`). The app uses `src/main.js` as its entry point.
-
-2. **View Example:**
-
- For testing purposes, the development version loads a sample XML file from the `data` directory. You can change the XML in `main.js` if needed.
-
-## Building & Packaging
-
-1. **Build for Production:**
-
- ```bash
- npm run build
- ```
-
- This command uses Vite to build a production version of your application. The output is typically placed in a `dist` directory.
-
-2. **Packaging as an NPM Module:**
-
- - Remove the test XML file loading from your module (it's now handled in `main.js`).
- - Publish your module to npm (or use it locally) so that the consuming project can call your exported `init(xmlStr, options)` function to load and render a DCC XML file.
-
## Usage in a Standalone HTML File
If you want to use the module in a simple HTML file, you can create an HTML file like this:
@@ -119,4 +68,55 @@ If you want to use the module in a simple HTML file, you can create an HTML file
```
This example shows how to initialize the app by passing an XML string and configuration options (such as the container ID and language).
-## License
\ No newline at end of file
+
+## Usage in an DCC XLT
+
+this preamble in the DCC-XML enables automatic usage of this js-libary to render the DCC
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet type="text/xsl" href="#embeddedXSL"?>
+<dcc:digitalCalibrationCertificate xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xmlns:dcc="https://ptb.de/dcc" xmlns:si="https://ptb.de/si"
+ xsi:schemaLocation="https://ptb.de/dcc https://www.ptb.de/dcc/v3.3.0/dcc.xsd"
+ schemaVersion="3.3.0">
+
+ <!-- Embedded XSLT stylesheet for production -->
+ <xsl:stylesheet id="embeddedXSL" version="1.0"
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+ xmlns:exsl="http://exslt.org/common">
+
+ <!-- Strip extra whitespace -->
+ <xsl:strip-space elements="*"/>
+ <xsl:output method="html" encoding="UTF-8" indent="yes"/>
+ <!-- here we start defining the HTML template witch then get the complete xml for parsing and rendering-->
+ <xsl:template match="/">
+ <html>
+ <head>
+ <meta charset="UTF-8"/>
+ <title>DCC Viewer</title>
+ <!-- Link to production CSS -->
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/dccviewer-js/dist/style.css"/>
+ </head>
+ <body>
+ <div id="app"></div>
+ <!-- Output the certificate XML into a hidden script block -->
+ <script id="xmlContent" type="application/xml">
+ <xsl:copy-of select="dcc:digitalCalibrationCertificate"/>
+ </script>
+ <!-- Load the production bundle and initialize the app, the xml put in a dummy container and then passed to the js app -->
+ <script type="module">
+ <![CDATA[
+ import { init } from 'https://cdn.jsdelivr.net/npm/dccviewer-js/dist/dccviewer-js.es.js';
+ const xmlNode = document.getElementById('xmlContent').firstChild;
+ const xmlStr = new XMLSerializer().serializeToString(xmlNode);
+ console.log('Serialized XML:', xmlStr);
+ init(xmlStr, { containerId: 'app', language: 'en' });
+ ]]>
+ </script>
+ </body>
+ </html>
+ </xsl:template>
+
+ </xsl:stylesheet>
+<!--rest of dcc -->
+```
\ No newline at end of file
diff --git a/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml b/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml
index c4b2794..2a9e1a0 100644
--- a/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml
+++ b/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml
@@ -2,7 +2,7 @@
<?xml-stylesheet type="text/xsl" href="#embeddedXSL"?>
<dcc:digitalCalibrationCertificate xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:dcc="https://ptb.de/dcc" xmlns:si="https://ptb.de/si"
- xsi:schemaLocation="https://ptb.de/dcc https://gitlab1.ptb.de/digitaldynamicmeasurement/dccanddsischemawithoutdepricatedelements/-/raw/main/dcc.xsd"
+ xsi:schemaLocation="https://ptb.de/dcc https://www.ptb.de/dcc/v3.3.0/dcc.xsd"
schemaVersion="3.3.0">
<!-- Embedded XSLT stylesheet for production -->
@@ -20,7 +20,7 @@
<meta charset="UTF-8"/>
<title>DCC Viewer</title>
<!-- Link to production CSS -->
- <link rel="stylesheet" type="text/css" href="http://141.25.102.20:5173/dist/style.css"/>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/dccviewer-js/dist/style.css"/>
</head>
<body>
<div id="app"></div>
@@ -31,7 +31,7 @@
<!-- Load the production bundle and initialize the app -->
<script type="module">
<![CDATA[
- import { init } from 'http://141.25.102.20:5173/dist/dccviewer-js.es.js';
+ import { init } from 'https://cdn.jsdelivr.net/npm/dccviewer-js/dist/dccviewer-js.es.js';
const xmlNode = document.getElementById('xmlContent').firstChild;
const xmlStr = new XMLSerializer().serializeToString(xmlNode);
console.log('Serialized XML:', xmlStr);
diff --git a/package-lock.json b/package-lock.json
index 5eebfa1..6419b97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,18 @@
{
- "name": "dccviewertypescript",
+ "name": "dccviewer-js",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "dccviewertypescript",
+ "name": "dccviewer-js",
"version": "0.1.0",
"dependencies": {
"dsiunits-js": "^0.9.1",
"events": "^3.3.0",
"jsoneditor": "^9.5.6",
+ "mime": "^4.0.6",
+ "mime-types": "^2.1.35",
"plotly.js-dist": "^2.18.2",
"xml2js": "^0.4.23"
},
@@ -5237,11 +5239,25 @@
"node": ">=8.6"
}
},
+ "node_modules/mime": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.6.tgz",
+ "integrity": "sha512-4rGt7rvQHBbaSOF9POGkk1ocRP16Md1x36Xma8sz8h8/vfCUI2OtEIeCqe4Ofes853x4xDoPiFLIT47J5fI/7A==",
+ "funding": [
+ "https://github.com/sponsors/broofa"
+ ],
+ "license": "MIT",
+ "bin": {
+ "mime": "bin/cli.js"
+ },
+ "engines": {
+ "node": ">=16"
+ }
+ },
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -5251,7 +5267,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
diff --git a/package.json b/package.json
index 5567386..5f12e85 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "dccviewer-js",
- "version": "0.1.0",
+ "version": "0.1.1",
"description": "A JS application for displaying digital calibration certificates.",
"main": "dist/dccviewer-js.bundle.js",
"files": [
@@ -34,7 +34,9 @@
"identity-obj-proxy": "^3.0.0",
"jest": "^29.0.0",
"jest-environment-jsdom": "^29.7.0",
- "vite": "^4.5.9"
+ "vite": "^4.5.9",
+ "mime": "^4.0.6",
+ "mime-types": "^2.1.35"
},
"babel": {
"presets": [
diff --git a/src/app.js b/src/app.js
index c803821..9c8c14d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -15,7 +15,7 @@ export function init(xmlStr, options = {}) {
console.error('No container found with id', containerId);
return;
}
- appContainer.innerHTML = '';
+ appContainer.innerHTML = '<div id="disclaimer" style="background:orangered; color:#000; padding:8px; margin-bottom:10px; font-family: sans-serif; font-weight:bold;">This is a proof of concept and contains missing fields and errors. It is not for production use.</div>';
// Parse the XML string first
const cleanXmlStr = xmlStr.trim();
diff --git a/vite.config.js b/vite.config.js
index 82a6b4c..e1adac7 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,7 +2,17 @@ import { defineConfig } from 'vite';
export default defineConfig({
server: {
- cors: true
+ cors: true,
+ configureServer(server) {
+ server.middlewares.use((req, res, next) => {
+ if (req.url && req.url.startsWith('/data/')) {
+ // Use mime-types to get the proper Content-Type
+ const type = mime.lookup(req.url) || 'application/xml';
+ res.setHeader('Content-Type', type);
+ }
+ next();
+ });
+ }
},
resolve: {
alias: {
--
GitLab