0.3.2 • Published 6 years ago

weld-renderer-react v0.3.2

Weekly downloads
2
License
UNLICENSED
Repository
-
Last release
6 years ago

weld-renderer-react

Universal/isomorphic Weld project renderer built in Next.js/React.

Folder structure

  • components: React components elements Button.js etc Project.js Screen.js * Elements.js
  • pages: (1) Page component
  • lib: data
  • static: e.g. CSS files, images

Components

Project

Project includes a <head> and a Screen.

<Project
	project={project}
	projectId={projectId}
	screenId={screenId}
	customObjects={customObjects}
	rendererUrl={rendererUrl}
	windowProperties={windowProperties}
/>

Screen

<Screen
	screen={screen}
	layouts={project.breakpoints}
	customObjects={customObjects}
	windowProperties={windowProperties}
/>

How to Run

Install first:

yarn install

Development:

yarn dev

Production:

yarn build
yarn start

URL syntax

New style:

http://localhost:3000/embed/-KgIjgXxmrYP7p1CnJ7e
http://localhost:3000/embed/-KgIjgXxmrYP7p1CnJ7e/screen1

Old style:

http://localhost:3000/?server=production&projectId=-KgIjgXxmrYP7p1CnJ7e&screenId=screen1

URL parameters:

  • projectId (required)
  • screenId
  • server defaults to 'production'.
  • width screen width for optimized images
  • dpr device pixel ratio for optimized images

Test pages

“Test Everything” project:

Original WeldRenderer (localhost)Renderer (staging)Renderer (production)Fastly CDN
Table of contentsRR localRR stagingRR productionCDN
All objectsRR localRR stagingRR production
Custom objectsRR localRR stagingRR production
ResponsiveRR localRR stagingRR production
Object statesRR localRR stagingRR production
LinksRR localRR stagingRR production
Action BlocksRR localRR stagingRR production
FontsRR localRR stagingRR production

Other projects:

Original WeldRenderer (localhost)Renderer (staging)Renderer (production)Fastly CDN
PoP CaresRR localRR stagingRR production
Indiska 1RR localRR stagingRR production
TomSoderlund.comRR localRR stagingRR production
HenricMalmberg.seRR localRR stagingRR production

Embed mode (for debugging)

Embed in an IFrame:

http://localhost:3000/embed-test?server=production&projectId=-KgIjgXxmrYP7p1CnJ7e&screenId=screen1

Connections to weld-angular-node

  • elementTypeModel → Element.js
  • weldFilters (video) → Video.js
  • responsiveLayoutListener + cssBuilder → ElementStyleTag.js
  • elementBuilder
@weld-io/weld-crossplatform-libs@weld-io/weld-static-assetsbody-parsercorsexpressfastlyisomorphic-unfetchlodashnextreactreact-domreact-matchmedia-connectuglifyjs-webpack-plugin
@infinitebrahmanuniverse/nolb-wel@everything-registry/sub-chunk-3140
0.3.2

6 years ago