dndzone is not defined

[walmartwarlord]

Hi, tried this directive on a fresh solid + vite app

1. npx degit solidjs/templates/ts solid-dnd-test
2. npm install && npm install solid-dnd-directive
3. Add demo code

import { createSignal, For } from "solid-js";
import { dndzone } from "solid-dnd-directive";
const containerStyle = {
  border: "1px solid black",
  padding: "0.3em",
  "max-width": "200px",
};
const itemStyle = {
  border: "1px solid blue",
  padding: "0.3em",
  margin: "0.2em 0",
};

function App() {
  const [items, setItems] = createSignal([
    { id: 1, title: "item 1" },
    { id: 2, title: "item 2" },
    { id: 3, title: "item 3" },
  ]);

  function handleDndEvent(e) {
    const { items: newItems } = e.detail;
    setItems(newItems);
  }
  return (
    <main>
      <section
        style={containerStyle}
        use:dndzone={{ items }}
        on:consider={handleDndEvent}
        on:finalize={handleDndEvent}
      >
        <For each={items()}>
          {(item) => <div style={itemStyle}>{item.title}</div>}
        </For>
      </section>
    </main>
  );
}

export default App;

Error:

[isaacHagoel]

is it a typescript error? does it work without typescript?

On Thu, Feb 10, 2022 at 3:08 PM walmartwarlord @.***> wrote:

Hi, tried this directive on a fresh solid + vite app

1. npx degit solidjs/templates/ts solid-dnd-test
2. npm install && npm install solid-dnd-directive
3. Add demo code

import { createSignal, For } from "solid-js";import { dndzone } from "solid-dnd-directive";const containerStyle = { border: "1px solid black", padding: "0.3em", "max-width": "200px",};const itemStyle = { border: "1px solid blue", padding: "0.3em", margin: "0.2em 0",}; function App() { const [items, setItems] = createSignal([ { id: 1, title: "item 1" }, { id: 2, title: "item 2" }, { id: 3, title: "item 3" }, ]);

function handleDndEvent(e) { const { items: newItems } = e.detail; setItems(newItems); } return (

{(item) =>

{item.title}

}

);} export default App;

Error: [image: Screen Shot 2022-02-10 at 12 07 35 PM] https://user-images.githubusercontent.com/72330740/153335275-57be09cc-0657-4e17-84cb-1c18b2bd7013.png

[image: Screen Shot 2022-02-10 at 12 07 54 PM] https://user-images.githubusercontent.com/72330740/153335300-9977d070-9b22-4de6-a066-795f482b745c.png

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/solid-dnd-directive/issues/6, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC42M4VO5HR3LESY2K3U2M233ANCNFSM5N7P2UGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

[walmartwarlord]

It works without TypeScript.

[isaacHagoel]

so i think u just need to declare it. see https://www.solidjs.com/docs/latest#special-jsx-attributes

On Thu, Feb 10, 2022 at 3:58 PM walmartwarlord @.***> wrote:

It works without TypeScript.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/solid-dnd-directive/issues/6#issuecomment-1034494119, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC24JO6P5VMDAOT2MXDU2NAWRANCNFSM5N7P2UGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[walmartwarlord]

Yes I tried it, same error. The TypeScript error in vscode is gone, but still getting Uncaught ReferenceError: dndzone is not defined

[isaacHagoel]

can u send the exact config u've added? i am no typescript guru but can have a look tomorrow

On Thu, Feb 10, 2022 at 4:06 PM walmartwarlord @.***> wrote:

Yes I tried it, same error. The TypeScript error in vscode is gone, but still getting Uncaught ReferenceError: dndzone is not defined

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/solid-dnd-directive/issues/6#issuecomment-1034497985, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCY27QI6ISVUASWS64LU2NBWVANCNFSM5N7P2UGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[walmartwarlord]

ryan commented on my thread https://github.com/solidjs/solid/discussions/845#discussioncomment-2146959

[isaacHagoel]

Ah good to know. Were you able to use his advice to make it work?

On Thu, Feb 10, 2022, 17:09 walmartwarlord @.***> wrote:

ryan commented on my thread solidjs/solid#845 (comment) https://github.com/solidjs/solid/discussions/845#discussioncomment-2146959

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/solid-dnd-directive/issues/6#issuecomment-1034533372, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZ6GXMNKEEAI2I5YDTU2NJDHANCNFSM5N7P2UGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[walmartwarlord]

Yes. If using typescript, we can assign it to a local variable

import { dndzone as dndZoneDirective } from "solid-dnd-directive";

const dndzone = dndZoneDirective