paperclip-ui / legacy-paperclip Goto Github PK

Just add <import src="fsfsfsfs.pc"> at top of pc file

TODOS:

• Rust engine should generate diffs of previous DOM structs
• Web renderer should receive incremental patches

Should create new project. See Gatsby for inspiration.

Currently, parsers stop & return syntax errors as they come up; this is terrible DX. Instead, all parsers should store syntax errors in a vector.

Forgot about this 🙈

This will require more functionality to the paperclip engine - possible a suggestions() engine prop which looks for patterns in tokens.

TODOS:

• auto-complete for css prop names
• auto-complete for reserved CSS keywords
• auto-complete for imported elements
• auto-complete for imported mixins
• auto-complete for CSS variables
• auto-complete for native elements
• auto-complete for slot props
• auto-complete for >>> references
• auto-complete for importing files

E.g:

div {
  & span {
    color: red;
  }
}

Todos

• prevent slots for...
  • reserved attributes: id, as, component, export
• a11y

Steps:

Add <import src="fdsfdfndjfnfjsdf.css"> at the top of a file
Compile the PC file

☝️ Error should show up at this point

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

TODO:

• ~=
• *=
• +=

E.g:

<import id="some-component" src="./some-component.pc">
🎉🎉🎉🎉🎉
<some-component />

☝🏻 Location of tag name here is incorrect since emojis contain more than one u8 character

Inspiration:

• https://react-select.com/styles

Todos

• Replace TS inferencer
• Hook into Linter

Considerations:

• Error messages may get annoying for props reserved to code (such as listeners)

needed for website

This is causing errors when meta + click is pressed on text elements in the preview.

Requires location to also be added to evaluated JS values

E.g:

<div export component id="something">
</div>

However, this wouldn't work without the component attribute:

<div export id="something">
</div>

☝️ Should result in an error: "component" attribute is needed for export.

TODOS:

• Examples (should use mini editor)

Should cover Rust, and TypeScript code

• Should just be able to load a module: <import id="something" src="some-module">
• resolving index.pc

Depends on #11

Instead of replacing the entire source, we can persist changes from VS Code

The idea is to have the ability to use different browser renderers in the VS Code preview.

Having one <style /> block at the top is a bit unwieldy. Here's an alternative:

<div>
  <style scoped>
    div { color: red; }
  </style>
</div>

Might not be fixable since .css files use the builtin CSS language server. Alternatively, we could use .pcss files.

Depends on #31

Happening in calculator demo.

id conflicts with styling. Instead, maybe as attribute?

<import as="import" src="./something.pc">

<div export component as="something">
</div>

Based on https://www.w3schools.com/tags/att_scoped.asp

Slight deviation from native HTML:

<div>
  <style>
      div { color: red; }
  </style>
   this is red tex
</div>

<div>
  this is black text
</div>

in CSS, and HTML

TODOS:

• react-native preview
• CSS needs to be compiled to vanilla JS
• CSS would need to be scoped down since expressions like :nth-child wouldn't work.

Since components & exports will need to be explicitly defined (#40, #42), there should be a warning when bindings are used outside of components. For example, this would be invalid:

Hello {message}!

Since there wouldn't be any way to use the {message} binding. Instead, the user would have to define the binding in a component. For example:

<span component id="Message">
  Hello {children}
</span>

☝️ This would still display a preview of Hello undefined, but the user could then preview the component like so:

<span component id="Message">
  Hello {children}
</span>

<fragment preview>
  <Message>World!</Message>
</fragment>

e.g:

<div component="something">
  {thisIsScoped}
</div>

<!-- alternative -->
<div component id="something-else">
  {thisIsScoped}
</div>

<something />

To cover fragments, we can create an explicit tag:

<fragment component id="something">
  some text
 <an-element />
</fragment>

☝️ This would replace <></> syntax.

<self /> would also be deprecated since elements are all sitting at the root, you'd just need an id, and component attribute. Previews might look something like this:

<div component id="button">
  {children}
</div>

<fragment preview>
  This is a button: <button>Something</button>
</fragment>

preview and component attributes could also be combined:

<fragment preview component id="some-preview">
</fragment>

☝️ There could be some discoverability in the preview UI that looks for all preview elements and allows the user to toggle between them. For example:

<fragment preview component id="MobilePreview" label="Mobile preview">
  <!-- HTML here -->
</fragment>
<fragment preview component id="TabletPreview" label="Tabel Preview">
  <!-- HTML here -->
</fragment>

☝️ These preview fragments would also be exported as components.

Not this:

<style>
  div[done] {
    color: red;
  }
</style>

<div {done}>something</div>

Stuff that needs to be covered:

• style overrides
• style variants

☝ with these two things covered we should be good! 🙌