HTML Bridge via TS App Packages

Hi Friends

I want to know if it’s possible to use TS App Packages to create HTML Bridge (Journey Iframe Client) solutions/implementations.

The PDF Package seems to be a special implementation of exactly that, but I just want to be able to communicate with my custom HTML that gets built via Webpack / TS App Package build process.

Is this possible?

I tried the following, but end up with a blank HTML page (this works using normal HTML bridge project that gets built outside of OXIDE

Screen Shot 2022-05-16 at 5.01.30 PM

package.json

{
  "name": "@local/color_picker",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "webpack"
  },
  "main": "dist/index.js",
  "dependencies": {
    "journey-iframe-client": "^0.2.0",
    "a-color-picker": "^1.2.1"
  },
  "devDependencies": {
    "@types/node": "^10.11.6",
    "@types/qrcode.react": "^1.0.0",
    "css-loader": "^1.0.0",
    "file-loader": "^3.0.1",
    "html-webpack-inline-source-plugin": "^0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "superagent": "^4.0.0-beta.5",
    "ts-loader": "^5.2.1",
    "typescript": "^3.2.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.10.3",
    "yaml": "^1.0.0"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'HTML Color Picker',
      template: './src/index.html',
      filename: 'color-picker.html',
      inlineSource: '.(js|css|ts)$'
    }),
    new HtmlWebpackInlineSourcePlugin()
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 9000, // Convert images < 8kb to base64 strings
            name: 'images/[hash]-[name].[ext]'
          }
        }]
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      }
    ]
  }
}

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>SimpleColorPicker</title>
	<style>
		body {
			font-family: 'Courier New', 'Courier', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		h1 {
			font-weight: normal;
			margin-top: 5%;
		}
	</style>
</head>
<body onload="init()">
	<h1>Color Picker</h1>
    <div class="container" acp-color="#0B4772"></div>
</body>
</html>

src/index.js


const JourneyIFrameClient = require('journey-iframe-client');
const colorPicker = require('a-color-picker');
let client = new JourneyIFrameClient();

window.init = function () {

  colorPicker.from('.container')
    .on('change', (picker, color) => {
      document.body.style.backgroundColor = color;
      // console.log(`Color: ${color}`);
      let pColor = picker.color
      // console.log(`pColor: ${pColor}`);

      // post HTMl color back to JourneyApps
      client.post('color-picked', pColor);
    });;
};

Build Logs

Hi Fred,

Technically this is currently possible, however unfortunately the developer experience is not very good at the moment. You would basically need to dig inside the PDF Package internals that is provided and modify it to suit your needs.

We have added this into our feedback system as a feature request, so this experience should be better in the future.

-Kobie

This Guide was created by inspecting the inner workings of the PDF CLI tool. Essentially the missing step is to copy the bundled html file to the assets directory during the build. See the build_copy step.