TSX colors still appear broken

[Alex23rodriguez]

[p00f]

Paste the code please, I can't type that out

[Dosx001]

This is the same issue as #118. I hope @p00f can fix this soon. Miss this plugin in my react development.

[p00f]

@Dosx001 The snippet pasted in #118 works, and nobody pasted the one here yet

[Dosx001]

@p00f I assumed the issue was unresolved since the it was still open.

Well here's a simple snippet I have laying around.

import type { GetServerSideProps } from "next";
import { useRouter } from "next/router";
import { useState } from "react";
import { prisma } from "../lib/prisma";

interface FormData {
  title: string;
  content: string;
  id: string;
}

interface Notes {
  notes: {
    id: string;
    title: string;
    content: string;
  }[];
}

const Home = ({ notes }: Notes) => {
  const [form, setForm] = useState<FormData>({
    title: "",
    content: "",
    id: "",
  });
  const router = useRouter();

  const refreshData = () => {
    router.replace(router.asPath);
  };

  async function create(data: FormData) {
    if (data.title && data.content) {
      try {
        fetch("http://localhost:3000/api/create", {
          body: JSON.stringify(data),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        }).then(() => {
          setForm({ title: "", content: "", id: "" });
          refreshData();
        });
      } catch (e) {
        console.log(e);
      }
    }
  }
  async function deleteNote(id: string) {
    try {
      fetch(`http://localhost:3000/api/note/${id}`, {
        headers: {
          "Content-Type": "application/json",
        },
        method: "DELETE",
      }).then(() => {
        refreshData();
      });
    } catch (e) {
      console.log(e);
    }
  }

  const handleSubmit = async (data: FormData) => {
    try {
      create(data);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <h1 className="text-center font-bold text-2xl mt-4">Notes</h1>
      <form
        className="w-auto min-w-[25%] max-w-min mx-auto space-y-6 flex flex-col items-stretch"
        onSubmit={(e) => {
          e.preventDefault();
          handleSubmit(form);
        }}
      >
        <input
          className="border-2 rounded border-gray-600 p-1"
          type="text"
          placeholder="Title"
          value={form.title}
          onChange={(e) => setForm({ ...form, title: e.target.value })}
        />
        <textarea
          className="border-2 rounded border-gray-600 p-1"
          placeholder="Content"
          value={form.content}
          onChange={(e) => setForm({ ...form, content: e.target.value })}
        />
        <button type="submit" className="bg-blue-500 text-white rounded p-1">
          Add
        </button>
      </form>
      <div className="w-auto min-w-[25%] max-w-min mt-20 mx-auto space-y-6 flex flex-col items-stretch">
        <ul>
          {notes.map((note) => (
            <li key={note.id} className="border-b border-gray-600 p-2">
              <div className="flex justify-between">
                <div className="flex-1">
                  <h3 className="font-bold">{note.title}</h3>
                  <p className="text-sm">{note.content}</p>
                </div>
                <button
                  onClick={() => deleteNote(note.id)}
                  className="bg-red-500 px-3 text-white rounded"
                >
                  X
                </button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Home;

export const getServerSideProps: GetServerSideProps = async () => {
  const notes = await prisma.note.findMany({
    select: {
      title: true,
      id: true,
      content: true,
    },
  });
  return {
    props: {
      notes,
    },
  };
};

[p00f]

@Dosx001 can you try out the latest commit?

[Dosx001]

@p00f this is what I'm seeing with the new commit on
OS: Arch Linux x86_64
Kernel: 5.18.14-arch1-1
NVIM v0.7.2

[Dosx001]

It looks fine on 6c0b3b6

[Gelio]

I also encounter this problem in typescriptreact.

import type { Component } from "solid-js";

import logo from "./logo.svg";
import styles from "./App.module.css";

const App: Component = () => {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
      </header>
    </div>
  );
};

export default App;

Notice that the self-closing img element (line 9) is colored correctly. All other elements' props have the same color as the element (line 7, 8, 14-17). Maybe that helps solve the problem.

I am on the latest commit (c5d2e6c).

[p00f]

@Dosx001 is right, this is a duplicate of #118

[Alex23rodriguez]

i'm sorry I wasn't able to test over the weekend, but i'm happy to say that it works for me in the latest commit!