Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React components #143

Merged
merged 45 commits into from
Dec 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
9219b5f
Add @vitejs/plugin-react
psrpinto Dec 2, 2022
62e9f30
Add Chat react component
psrpinto Dec 2, 2022
13b9937
Use Chat component for block dev env
psrpinto Dec 2, 2022
7d58426
Add Popup component
psrpinto Dec 2, 2022
ae93cf8
Use Popup component for popup dev env
psrpinto Dec 2, 2022
5d44af3
Extract function
psrpinto Dec 2, 2022
b28e7ad
Create subdirectory per component
psrpinto Dec 2, 2022
111b50c
Move attributes to chat component
psrpinto Dec 2, 2022
688a582
Add style support to Chat component
psrpinto Dec 2, 2022
82f59df
Make Chat component focusable
psrpinto Dec 2, 2022
85ce178
Use Chat component from block
psrpinto Dec 2, 2022
8770388
Remove no longer used component
psrpinto Dec 2, 2022
be6114d
Move styles to chat component
psrpinto Dec 2, 2022
dac4420
Move CSS to components
psrpinto Dec 2, 2022
d692ef6
Add Block component
psrpinto Dec 2, 2022
f6274f1
Use Block component from Edit
psrpinto Dec 2, 2022
7dde3b0
Correctly parse attributes
psrpinto Dec 2, 2022
97eca75
Correctly set up block in dev env
psrpinto Dec 2, 2022
35e096d
Render Block from PHP
psrpinto Dec 2, 2022
3e49c41
Fallback to window.origin as the iframe URL
psrpinto Dec 2, 2022
9017b90
Render Popup from PHP
psrpinto Dec 3, 2022
263782a
Move each component to its own file
psrpinto Dec 3, 2022
c65deea
Correctly style popup
psrpinto Dec 3, 2022
afc678b
Extract IframeUrl and IframeParams to chat component
psrpinto Dec 3, 2022
3409d2b
Open Popup when loginToken is present
psrpinto Dec 3, 2022
5c23481
Remove no longer used code
psrpinto Dec 3, 2022
861084d
Move parent.ts to the components, as render.ts
psrpinto Dec 3, 2022
bc4a81b
Inline dev env CSS into parent.html
psrpinto Dec 3, 2022
f30e73c
Add theme builder rollup plugin from hydrogen
psrpinto Dec 3, 2022
f571ea8
Use a single iframe.html instead of one per target
psrpinto Dec 3, 2022
01556d3
Unify both vite targets into a single module
psrpinto Dec 3, 2022
7e474e0
Rename module from index to app
psrpinto Dec 3, 2022
14ca9ce
Remove no longer used commands
psrpinto Dec 3, 2022
78f1b66
Rename directory
psrpinto Dec 3, 2022
c5dbd5a
Introduce an iframe subdirectory
psrpinto Dec 3, 2022
f80dbeb
Move block/ to frontend/
psrpinto Dec 3, 2022
3045677
Update release process for new structure
psrpinto Dec 3, 2022
2f5f599
Only register app.iife.js once
psrpinto Dec 3, 2022
43f00c3
Don't bundle React since WordPress already provides it
psrpinto Dec 3, 2022
35ba858
Automatically open popup in dev env
psrpinto Dec 3, 2022
9b1fa8c
Improve html title
psrpinto Dec 3, 2022
db9b74c
Configure iframe URL in a single location
psrpinto Dec 5, 2022
3f097f5
Show block and popup on same page, in development
psrpinto Dec 5, 2022
fc9735b
Specify version
psrpinto Dec 5, 2022
aac73cc
Remove references to non-existent directory
psrpinto Dec 5, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ node_modules: package.json yarn.lock
yarn install

build/frontend: frontend
yarn build:popup
yarn build:block
yarn build

build/block: block
yarn build:block-internal
build/block: frontend/block
yarn build:block
2 changes: 1 addition & 1 deletion bin/prepare-release.sh
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ else
fi

# Substitute version in all relevant files.
for file in package.json composer.json block/block.json
for file in package.json composer.json frontend/block/block.json
do
jq ".version = \"$VERSION\"" $file > $file.tmp
mv $file.tmp $file
Expand Down
60 changes: 0 additions & 60 deletions block/iframe.tsx

This file was deleted.

14 changes: 0 additions & 14 deletions block/style.scss

This file was deleted.

File renamed without changes.
33 changes: 33 additions & 0 deletions frontend/app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { BlockProps } from "./components/block";

import { render as renderBlockInternal } from "./components/block/render";
import { PopupProps } from "./components/popup";
import { render as renderPopupInternal } from "./components/popup/render";

export function renderBlock(containerId: string, props: BlockProps) {
props.iframeUrl = getIframeUrl();
return renderBlockInternal(containerId, props);
}

export function renderPopup(containerId: string, props: PopupProps) {
props.iframeUrl = getIframeUrl();
return renderPopupInternal(containerId, props);
}

export function getIframeUrl(): URL {
let rootUrl = window.origin;
const config = window.ChatrixConfig ?? null;
if (config && config.rootUrl) {
rootUrl = config.rootUrl;
}

return new URL("iframe.html", rootUrl);
}

declare global {
interface Window {
ChatrixConfig: {
rootUrl: string;
};
}
}
File renamed without changes.
17 changes: 9 additions & 8 deletions block/edit.tsx → frontend/block/edit.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useBlockProps } from "@wordpress/block-editor";
import { ResizableBox } from "@wordpress/components";
import { WPElement } from '@wordpress/element';
import { parseAttributes } from "./attributes";
import { getIframeUrl } from "../app";
import { Block, BlockProps, parseAttributes } from "../components/block";
import './editor.scss';
import IFrame, { IframeProps } from "./iframe";
import InspectorControls from "./inspector/InspectorControls";

interface Props {
Expand All @@ -12,12 +12,13 @@ interface Props {
}

export default function Edit(props: Props): WPElement {
const { setAttributes } = props;
const attributes = parseAttributes(props.attributes);
const { attributes, setAttributes } = props;
const parsedAttributes = parseAttributes(attributes);

const iframeProps: IframeProps = {
const blockProps: BlockProps = {
focusable: true,
...attributes
attributes,
iframeUrl: getIframeUrl(),
};

return (
Expand All @@ -27,7 +28,7 @@ export default function Edit(props: Props): WPElement {
<ResizableBox
size={{
width: "100%",
height: attributes.height.toString(),
height: parsedAttributes.height ? parsedAttributes.height.toString() : "600px",
}}
enable={{
top: false,
Expand All @@ -43,7 +44,7 @@ export default function Edit(props: Props): WPElement {
setAttributes({ height: { value: elt.clientHeight, unit: "px" } });
}}
>
<IFrame {...iframeProps}/>
<Block {...blockProps}/>
</ResizableBox>
</div>
</>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
6 changes: 6 additions & 0 deletions frontend/block/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/**
* Styles for both editor and the the frontend.
*/

.wp-block-automattic-chatrix {
}
Loading