- );
- }
-}
-
-export function greeter2(person: any) {
- // console.log(items);
- return `Hello, ${person}`;
-}
diff --git a/js/react/test.ts b/js/react/test.ts
deleted file mode 100644
index 470d593a9..000000000
--- a/js/react/test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { InlineReply } from './sub/test2';
-
-// console.log(InlineReply);
-
-export function greeter(person: any) {
- return 'Hello, ' + person;
-}
diff --git a/js/react/util/BackboneWrapper.md b/js/react/util/BackboneWrapper.md
new file mode 100644
index 000000000..9ad71b39a
--- /dev/null
+++ b/js/react/util/BackboneWrapper.md
@@ -0,0 +1,20 @@
+Rendering a real `Whisper.MessageView` using `` and
+``.
+
+```jsx
+const model = new Whisper.Message({
+ type: 'outgoing',
+ body: 'text',
+ sent_at: Date.now() - 5000,
+})
+const View = Whisper.MessageView;
+const options = {
+ model,
+};
+
+
+
+```
diff --git a/js/react/util/BackboneWrapper.tsx b/js/react/util/BackboneWrapper.tsx
new file mode 100644
index 000000000..dcdcbaeea
--- /dev/null
+++ b/js/react/util/BackboneWrapper.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+interface IProps {
+ /** The View class, which will be instantiated then treated like a Backbone View */
+ readonly View: IBackboneViewConstructor;
+ /** Options to be passed along to the view when constructed */
+ readonly options: object;
+}
+
+interface IBackboneView {
+ remove: () => void;
+ render: () => void;
+ el: HTMLElement;
+}
+
+interface IBackboneViewConstructor {
+ new (options: object): IBackboneView;
+}
+
+/**
+ * Allows Backbone Views to be rendered inside of React (primarily for the styleguide)
+ * while we slowly replace the internals of a given Backbone view with React.
+ */
+export class BackboneWrapper extends React.Component {
+ protected el: Element | null;
+ protected view: IBackboneView | null;
+ protected setEl: (element: HTMLDivElement | null) => void;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.el = null;
+ this.view = null;
+
+ this.setEl = (element: HTMLDivElement | null) => {
+ this.el = element;
+ this.setup();
+ };
+ this.setup = this.setup.bind(this);
+ }
+
+ public setup() {
+ const { el } = this;
+ const { View, options } = this.props;
+
+ if (!el) {
+ return;
+ }
+ this.view = new View(options);
+ this.view.render();
+
+ // It's important to let the view create its own root DOM element. This ensures that
+ // its tagName property actually takes effect.
+ el.appendChild(this.view.el);
+ }
+
+ public teardown() {
+ if (!this.view) {
+ return;
+ }
+
+ this.view.remove();
+ this.view = null;
+ }
+
+ public componentWillUnmount() {
+ this.teardown();
+ }
+
+ public shouldComponentUpdate() {
+ // we're handling all updates manually
+ return false;
+ }
+
+ public render() {
+ return ;
+ }
+}
diff --git a/js/react/util/MessageParents.md b/js/react/util/MessageParents.md
new file mode 100644
index 000000000..41bf5a4eb
--- /dev/null
+++ b/js/react/util/MessageParents.md
@@ -0,0 +1,8 @@
+
+The simplest example of using the `` component:
+
+```jsx
+
+
Just a plain bit of text
+
+```
diff --git a/js/react/util/MessageParents.tsx b/js/react/util/MessageParents.tsx
new file mode 100644
index 000000000..da934341e
--- /dev/null
+++ b/js/react/util/MessageParents.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+
+interface IProps {
+ /**
+ * Corresponds to the theme setting in the app, and the class added to the root element.
+ */
+ theme: "ios" | "android" | "android-dark";
+}
+
+/**
+ * Provides the parent elements necessary to allow the main Signal Desktop stylesheet to
+ * apply (with no changes) to messages in this context.
+ */
+export class MessageParents extends React.Component {
+ public render() {
+ const { theme } = this.props;
+
+ return (
+
+
+
+
+ {this.props.children}
+
+
+
+
+ );
+ }
+}
diff --git a/js/react/util/index.ts b/js/react/util/index.ts
new file mode 100644
index 000000000..8a6508b6b
--- /dev/null
+++ b/js/react/util/index.ts
@@ -0,0 +1,24 @@
+// Helper components used in the styleguide, exposed at 'util' in the global scope via the
+// context option in reaat-styleguidist.
+
+export { MessageParents } from './MessageParents';
+export { BackboneWrapper } from './BackboneWrapper';
+
+// Here we can make things inside Webpack available to Backbone views like preload.js.
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Message } from '../conversation/Message';
+import { Reply } from '../conversation/Reply';
+
+// Required, or TypeScript complains about adding keys to window
+const parent = window as any;
+
+parent.React = React;
+parent.ReactDOM = ReactDOM;
+
+const SignalReact = parent.Signal.React = parent.Signal.React || {};
+
+SignalReact.Message = Message;
+SignalReact.Reply = Reply;
diff --git a/js/views/backbone_wrapper_view.js b/js/views/backbone_wrapper_view.js
new file mode 100644
index 000000000..87bb44aa1
--- /dev/null
+++ b/js/views/backbone_wrapper_view.js
@@ -0,0 +1,47 @@
+/* global Backbone: false */
+
+// Additional globals used:
+// window.React
+// window.ReactDOM
+// window.i18n
+
+// eslint-disable-next-line func-names
+(function () {
+ 'use strict';
+
+ window.Whisper = window.Whisper || {};
+
+ window.Whisper.ReactWrapper = Backbone.View.extend({
+ className: 'react-wrapper',
+ initialize(options) {
+ const { Component, props, onClose } = options;
+ this.render();
+
+ this.Component = Component;
+ this.onClose = onClose;
+
+ this.update(props);
+ },
+ update(props) {
+ const updatedProps = this.augmentProps(props);
+ const element = window.React.createElement(this.Component, updatedProps);
+ window.ReactDOM.render(element, this.el);
+ },
+ augmentProps(props) {
+ return Object.assign({}, props, {
+ close: () => {
+ if (this.onClose) {
+ this.onClose();
+ return;
+ }
+ this.remove();
+ },
+ i18n: window.i18n,
+ });
+ },
+ remove() {
+ window.ReactDOM.unmountComponentAtNode(this.el);
+ Backbone.View.prototype.remove.call(this);
+ },
+ });
+}());
diff --git a/package.json b/package.json
index ed3d938e4..87e4a5fbf 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,9 @@
"eslint": "eslint .",
"tslint": "tslint ./js/react/**/*.{ts,tsx}",
"transpile": "tsc",
- "clean-transpile": "rimraf js/built/",
- "open-coverage": "open coverage/lcov-report/index.html"
+ "clean-transpile": "rimraf js/react/**/*.js js/react/*.js",
+ "open-coverage": "open coverage/lcov-report/index.html",
+ "styleguide": "styleguidist server"
},
"dependencies": {
"@sindresorhus/is": "^0.8.0",
@@ -92,6 +93,7 @@
"devDependencies": {
"@types/react": "^16.3.1",
"@types/react-dom": "^16.0.4",
+ "arraybuffer-loader": "^1.0.3",
"asar": "^0.14.0",
"bower": "^1.8.2",
"chai": "^4.1.2",
@@ -120,11 +122,15 @@
"node-sass-import-once": "^1.2.0",
"nsp": "^3.2.1",
"nyc": "^11.4.1",
+ "react-docgen-typescript": "^1.2.6",
+ "react-styleguidist": "^7.0.1",
"sinon": "^4.4.2",
"spectron": "^3.8.0",
+ "ts-loader": "^4.1.0",
"tslint": "^5.9.1",
"tslint-react": "^3.5.1",
- "typescript": "^2.8.1"
+ "typescript": "^2.8.1",
+ "webpack": "^4.4.1"
},
"engines": {
"node": "^8.2.1"
diff --git a/styleguide.config.js b/styleguide.config.js
new file mode 100644
index 000000000..b83872d83
--- /dev/null
+++ b/styleguide.config.js
@@ -0,0 +1,158 @@
+const webpack = require('webpack');
+const path = require('path');
+const typescriptSupport = require('react-docgen-typescript');
+
+
+const propsParser = typescriptSupport.withCustomConfig('./tsconfig.json').parse;
+
+module.exports = {
+ sections: [
+ {
+ name: 'Conversation',
+ description: 'Everything necessary to render a conversation',
+ components: 'js/react/conversation/*.tsx',
+ },
+ {
+ name: 'Utility',
+ description: 'Utility components only used for testing',
+ components: 'js/react/util/*.tsx',
+ },
+ ],
+ context: {
+ // Exposes necessary utilities in the global scope for all readme code snippets
+ util: 'js/react/util',
+ },
+ // We don't want one long, single page
+ pagePerSection: true,
+ // Expose entire repository to the styleguidist server, primarily for stylesheets
+ assetsDir: './',
+ // Add top-level elements to the HTML:
+ // docs: https://github.com/vxna/mini-html-webpack-template
+ // https://react-styleguidist.js.org/docs/configuration.html#template
+ template: {
+ head: {
+ links: [{
+ rel: 'stylesheet',
+ type: 'text/css',
+ href: '/stylesheets/manifest.css',
+ }],
+ },
+ body: {
+ // Brings in all the necessary components to boostrap Backbone views
+ // Mirrors the order used in background.js.
+ scripts: [
+ {
+ src: 'test/legacy_bridge.js',
+ },
+ {
+ src: 'node_modules/moment/min/moment-with-locales.min.js',
+ },
+ {
+ src: 'js/components.js',
+ },
+ {
+ src: 'js/reliable_trigger.js',
+ },
+ {
+ src: 'js/database.js',
+ },
+ {
+ src: 'js/storage.js',
+ },
+ {
+ src: 'js/signal_protocol_store.js',
+ },
+ {
+ src: 'js/libtextsecure.js',
+ },
+ {
+ src: 'js/focus_listener.js',
+ },
+ {
+ src: 'js/notifications.js',
+ },
+ {
+ src: 'js/delivery_receipts.js',
+ },
+ {
+ src: 'js/read_receipts.js',
+ },
+ {
+ src: 'js/read_syncs.js',
+ },
+ {
+ src: 'js/libphonenumber-util.js',
+ },
+ {
+ src: 'js/models/messages.js',
+ },
+ {
+ src: 'js/models/conversations.js',
+ },
+ {
+ src: 'js/models/blockedNumbers.js',
+ },
+ {
+ src: 'js/expiring_messages.js',
+ },
+
+ {
+ src: 'js/chromium.js',
+ },
+ {
+ src: 'js/registration.js',
+ },
+ {
+ src: 'js/expire.js',
+ },
+ {
+ src: 'js/conversation_controller.js',
+ },
+ {
+ src: 'js/emoji_util.js',
+ },
+ // Select Backbone views
+ {
+ src: 'js/views/whisper_view.js',
+ },
+ {
+ src: 'js/views/timestamp_view.js',
+ },
+ {
+ src: 'js/views/message_view.js',
+ },
+ // Hacky way of including templates for Backbone components
+ {
+ src: 'test/legacy_templates.js',
+ },
+ ],
+ },
+ },
+ propsParser,
+ webpackConfig: {
+ devtool: 'source-map',
+
+ resolve: {
+ // Necessary to enable the absolute path used in the context option above
+ modules: [
+ __dirname,
+ path.join(__dirname, 'node_modules'),
+ ],
+ extensions: ['.tsx'],
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ loader: 'ts-loader'
+ },
+ {
+ // To test handling of attachments, we need arraybuffers in memory
+ test: /\.(gif|mp3|mp4)$/,
+ loader: 'arraybuffer-loader',
+ },
+ ],
+ },
+ },
+};
diff --git a/test/index.html b/test/index.html
index 3384f5986..b922f8955 100644
--- a/test/index.html
+++ b/test/index.html
@@ -583,6 +583,7 @@
+
diff --git a/test/legacy_bridge.js b/test/legacy_bridge.js
new file mode 100644
index 000000000..1344d96ff
--- /dev/null
+++ b/test/legacy_bridge.js
@@ -0,0 +1,42 @@
+
+// Because we aren't hosting the styleguide in Electron, we can't rely on preload.js
+// to set things up for us. This gives us the minimum bar shims for everything it
+// provdes.
+//
+// Remember, the idea here is just to enable visual testing, no full functionality. Most
+// of thise can be very simple.
+
+window.PROTO_ROOT = '/protos';
+window.nodeSetImmediate = () => {};
+
+window.Signal = {};
+window.Signal.Backup = {};
+window.Signal.Crypto = {};
+window.Signal.Logs = {};
+window.Signal.Migrations = {};
+
+window.Signal.React = window.Signal.React = {};
+
+window.EmojiConvertor = function EmojiConvertor() {};
+window.EmojiConvertor.prototype.init_colons = () => {}
+window.EmojiConvertor.prototype.signalReplace = html => html;
+window.EmojiConvertor.prototype.replace_unified = string => string;
+window.EmojiConvertor.prototype.img_sets = {
+ apple: {}
+};
+
+window.i18n = () => '';
+
+window.Signal.Migrations.V17 = {};
+window.Signal.OS = {};
+window.Signal.Types = {};
+window.Signal.Types.Attachment = {};
+window.Signal.Types.Errors = {};
+window.Signal.Types.Message = {
+ initializeSchemaVersion: attributes => attributes,
+};
+window.Signal.Types.MIME = {};
+window.Signal.Types.Settings = {};
+window.Signal.Views = {};
+window.Signal.Views.Initialization = {};
+window.Signal.Workflow = {};
diff --git a/test/legacy_templates.js b/test/legacy_templates.js
new file mode 100644
index 000000000..90748ffce
--- /dev/null
+++ b/test/legacy_templates.js
@@ -0,0 +1,45 @@
+
+// Taken from background.html.
+// Templates are here solely to support the Backbone views rendered in the styleguide.
+
+window.Whisper.View.Templates = {
+ hasRetry: `
+ {{ messageNotSent }}
+ {{ resend }}
+ `,
+ 'some-failed': `
+ {{ someFailed }}
+ `,
+ keychange: `
+ {{ content }}
+ `,
+ 'verified-change': `
+ {{ content }}
+ `,
+ message: `
+ {{> avatar }}
+