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
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
