fix: try to resolve file preview to a component (#1044)

* try to resolve file preview to a component * update snapshot
frctl · Jul 6, 2021 · f5b915a · f5b915a
1 parent 3c4e1be
commit f5b915a
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/examples/react/components/_preview.jsx b/examples/react/components/_preview.jsx
@@ -6,6 +6,7 @@ const Preview = (props) => {
         <html>
             <head>
                 <meta name="componentName" value={props._adapter.componentName} />
+                <meta name="defaultContextData" value={props.foo} />
             </head>
             <body>
                 <div id="root" dangerouslySetInnerHTML={{ __html: props.yield }} />
@@ -15,6 +16,7 @@ const Preview = (props) => {
 };
 
 Preview.propTypes = {
+    foo: PropTypes.string,
     yield: PropTypes.string,
     _adapter: PropTypes.shape({
         componentName: PropTypes.string,

diff --git a/examples/react/components/context/__snapshots__/context.spec.js.snap b/examples/react/components/context/__snapshots__/context.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`tree asynchronously loads context 1`] = `
 Object {
+  "foo": "bar",
   "xkcd": Object {
     "alt": "Proper User Policy apparently means Simon Says.",
     "day": "28",

diff --git a/examples/react/components/render/__snapshots__/render.spec.js.snap b/examples/react/components/render/__snapshots__/render.spec.js.snap
@@ -16,4 +16,4 @@ exports[`render renders specified template for variant 1`] = `"Render variant-2
 
 exports[`render renders variant template for variant with the same name 1`] = `"Render variant-2 <!-- -->something"`;
 
-exports[`render renders with preview layout 1`] = `"<!DOCTYPE html><html><head><meta name=\\"componentName\\" value=\\"Render\\"/></head><body><div id=\\"root\\">Render something</div></body></html>"`;
+exports[`render renders with preview layout 1`] = `"<!DOCTYPE html><html><head><meta name=\\"componentName\\" value=\\"Render\\"/><meta name=\\"defaultContextData\\" value=\\"bar\\"/></head><body><div id=\\"root\\">Render something</div></body></html>"`;
diff --git a/examples/react/fractal.config.js b/examples/react/fractal.config.js
@@ -33,6 +33,7 @@ fractal.set('project.title', 'Fractal React example');
 fractal.components.set('path', path.join(__dirname, 'components'));
 fractal.components.set('ext', '.jsx');
 fractal.components.engine(reactAdapter);
+fractal.components.set('default.context.foo', 'bar');
 
 /*
  * Tell the Fractal web preview plugin where to look for static assets.

diff --git a/packages/fractal/src/api/components/source.js b/packages/fractal/src/api/components/source.js
@@ -338,6 +338,13 @@ module.exports = class ComponentSource extends EntitySource {
         }
 
         if (_.get(indentifier, 'isFile')) {
+            // If the wrapper is a file, try to resolve it to an existing component so it could access its context.
+            // This happens when using a wrapper template in root of components dir.
+            let entity = this.find('viewPath', indentifier.path);
+            if (entity) {
+                return yield this._getWrapper(`@${entity.handle}`);
+            }
+
             // using a file
             let content = yield indentifier.getContent();
             return {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,4 +16,4 @@ exports[`render renders specified template for variant 1`] = `"Render variant-2

		exports[`render renders variant template for variant with the same name 1`] = `"Render variant-2 <!-- -->something"`;

		exports[`render renders with preview layout 1`] = `"<!DOCTYPE html><html><head><meta name=\\"componentName\\" value=\\"Render\\"/></head><body><div id=\\"root\\">Render something</div></body></html>"`;
		exports[`render renders with preview layout 1`] = `"<!DOCTYPE html><html><head><meta name=\\"componentName\\" value=\\"Render\\"/><meta name=\\"defaultContextData\\" value=\\"bar\\"/></head><body><div id=\\"root\\">Render something</div></body></html>"`;