unable to inject af-el components
See original GitHub issueHi Eytan, first of all, great work here, this concept can allow people to save so much time.
In the latest version (0.7.3), the views generated by the appfairy
command are a bit different and I don’t know how to use child components, could you provide a snippet as an example of how to use it? if you do, I can send you a PR with an up to date example.
The HTML bit exported from webflow is as follows. I’ll call it MainView
<body class="body">
<div af-el="prod-form" af-sock="prod-form" class="div-block-2">
<div class="w-form">
<form id="wf-form-Producdt-Identification-Form" name="wf-form-Producdt-Identification-Form" data-name="Producdt Identification Form">
<label for="name">Product Name</label>
<input type="text" class="w-input" maxlength="256" name="name" af-sock="prod-name" data-name="Name" id="name" required="">
[...]
<input type="submit" value="Submit" data-wait="Please wait..." af-sock="prod-submit" class="w-button">
</form>
<div class="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
In the generated MainView, in the place of the div with af-el=prod-form
it generates some lines like these
<div className="af-class-body">
<ProdFormView.Controller-af-sock-prod-form />
{/* [if lte IE 9]><![endif] */}
</div>
Then in MainController I did the following, according to the ‘prefetch’ tutorial
import React from 'react';
import ProdFormController from './ProdFormController';
import MainView from '../views/MainView';
export default (params) => (
<MainView>
<prod-form {...params} />
</MainView>
);
when running a project with this view and controller renderd by the Router, I get an error like this:
TypeError: Property property of MemberExpression expected node to be of a type ["Identifier","PrivateName"] but instead got "StringLiteral"
Trying to find out what’s wrong, I saw the view on your example, and it’s a bit different, there the af-el
element would be parsed as
<div className="__af-container-2 __af-w-container">
<h1 className="__af-heading-3">Registered Immigration Agent in Sydney, Australia</h1>
{proxies['contact-form'] && <ContactFormView.Controller {...proxies['contact-form']}>{proxies['contact-form'].children}</ContactFormView.Controller>}
</div>
It doesn’t look like something generated by the current version.
Could you guide me on how the new parsed views are supposed to be used?
Thanks! keep up the great work!.
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (1 by maintainers)
Top GitHub Comments
I get the same error when af-el and af-sock are assigned to the same Div. Got the error even with a clean project trying to follow the original tutorial video. Couldn’t figure out how to fix it though
af-el and af-sock can now co-exist. I fixed that.