Comments (8)
yysun
commented on May 12, 2024
1
I see. AppRun components have to mount to an element, so we cannot remove
the wrapper div. But we can try to apply the class name to the div.
…On Mon, Apr 1, 2019 at 2:51 PM bo-kh ***@***.***> wrote:
I will explain my thoughts with a simplified example. Let's pretend I have
a useful stateful component Stars.tsx that I would like to re-use in my
application several times:
Stars.tsx
import app, {Component} from 'apprun';
export default class Stars extends Component
{
view = state => <div class="stars">
<span>Here should be stars...</span>
</div>
}
In my main.tsx (for example) I would like to re-use this component this
way:
import app from 'apprun';
import Stars from './Stars';
const view = state => <div className="container">
<h2>Stars app</h2>
<Stars id="star1" className="stars-new" />
<Stars id="star2" className="stars-new" /></div>;
app.start('main', {}, view, {});
After I have run this example I will see the next situation in devTool:
[image: image]
<https://user-images.githubusercontent.com/17910553/55351147-4175ae80-54c6-11e9-9a5d-b4353026b349.png>
Here are two wrapping divs with Ids "star1" and "star2" that Component
adds (not me :))
So, the question is: could I suppress wrapping div creating in stateful
components or could you add at least an ability to handle className
property in this wrapping div that a developer could apply CSS rules by
class name (in my example "stars-new")? It's not good to define these divs'
CSS rules by id every time I use Stars component.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#57 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AAKaM7Nod40lLyx7ej6Wqh173CSJZFY6ks5vclUUgaJpZM4cUgJo>
.
from apprun.
yysun
commented on May 12, 2024
1
Changed in 1.18.2.
from apprun.
yysun
commented on May 12, 2024
You can define the class or CSS in the view function of your components.
class MyClass extends Component {
view = state => <div class='myClass' styles={{ 'color': 'red' }}>
</div>
}from apprun.
bo-kh
commented on May 12, 2024
I will explain my thoughts with a simplified example. Let's pretend I have a useful stateful component Stars.tsx that I would like to re-use in my application several times:
Stars.tsx
import app, {Component} from 'apprun';
export default class Stars extends Component
{
view = state => <div class="stars">
<span>Here should be stars...</span>
</div>
}In my main.tsx (for example) I would like to re-use this component this way:
import app from 'apprun';
import Stars from './Stars';
const view = state => <div className="container">
<h2>Stars app</h2>
<Stars id="star1" className="stars-new" />
<Stars id="star2" className="stars-new" />
</div>;
app.start('main', {}, view, {});After I have run this example I will see the next situation in devTool:
Here are two wrapping divs with Ids "star1" and "star2" that Component adds (not me :))
So, the question is: could I suppress creating wrapping divs "star1" and "star2" within stateful components or could you add at least an ability to handle className property in this wrapping div that a developer could apply CSS rules by class name (in my example "stars-new")? It's not good to define these divs' CSS rules by id every time I use Stars component.
from apprun.
yysun
commented on May 12, 2024
I have pushed a fix 7ca2764. It sets props to the div wrapper.
it("should set props to child component's div wrapper", () => {
class Child extends Component {
}
class Main extends Component {
view = _ => <>
<Child class="c1" id="c1" />
<Child className="c2" />
<Child style={{ 'color': 'red' }} />
<Child data-a='a' />
</>;
}
const element = document.createElement('div');
app.render(element, <Main />);
const main = element.children[0];
expect(main.children[0].id).toBe("c1");
expect(main.children[0].className).toBe("c1");
expect(main.children[1].className).toBe("c2");
expect((main.children[2] as HTMLDivElement).style.color).toBe("red");
expect((main.children[3] as HTMLDivElement).dataset.a).toBe("a");
});from apprun.
bo-kh
commented on May 12, 2024
Thank you! The fix looks good and simple. So far I like this small but very powerful library.
from apprun.
yysun
commented on May 12, 2024
@bo-kh, I am thinking to change the component wrapper element from div to section. Will this change break your code?
from apprun.
bo-kh
commented on May 12, 2024
@yysun, No, this change doesn't affect my code much. Semantically section suits better for the component wrapper purpose
from apprun.
Related Issues (20)
- How to handle file drop? HOT 1
- Update URL in the browser's address bar when SPA component activates HOT 4
- How to avoid triggering components initial event handler on form submit? HOT 2
- Problem using input element with list attribute HOT 2
- No jest in default SPA HOT 1
- Broken Link in docs HOT 1
- Example of child component updating parent's state? HOT 2
- Two-way bound textbox loses focus on input HOT 3
- First page always blank in sample. HOT 1
- Components within HTML string view pattern HOT 4
- Discord link on the website is broken HOT 1
- Can I use other libraries in place of lit-html? HOT 7
- global values created for ESM version HOT 1
- Cannot GET / HOT 4
- How to put 'selected' on <option>? HOT 3
- lit-html code not working in the docs HOT 2
- can we insert any html frame using apprun HOT 4
- Can't switch appRun components by switching in state HOT 2
- Is there a way to trigger event from console? HOT 3
- Snowpack template for AppRun? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apprun.