fix(classNames context): general improvements

[danilowoz]

• Make an identifier mandatory;
• Drop code-hike dependency;
• Drop THEME_PREFIX need to every className;

Closes #714

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sandpack-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2023 2:35pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5d4a324:

Sandbox	Source
Sandpack	Configuration
sandpack-run-stale-value	Configuration

[Jokcy]

Greate! Just have time to work with this issue and see your PR, the API looks similar as I imagine, can't wait for the new release.

[danilowoz]

Hey @Jokcy, thanks! Do you have any feedback? Not absolute sure about the API, but at least it is very strict and it was able to find many places where Sandpack was missing classNames.

// I specially didn't like of this pattern
classNames("sandpack-class-1", [
  classNames("sandpack-class-2"),
  classNames("sandpack-class-3"),
  "another-class",
  "another-class-2",
]

[Jokcy]

Hi @danilowoz , I used to try to keep the traditional classNames usage and just implement useClassNames hook for classes need prefix and class name map, like this:

import { classNames } from "../utils/classNames";
import { useClassNames} from "../utils/useClassNames";

const classNamesWithPrefix = useClassNames()

<div className={classNames(
    classNamesWithPrefix('sandpack-class-1', ...classNeedPrefix),
    buttonClassName,
    ...classesWithoutPrefix)}>
</div>

The only difference is it try to fit the api of classnames or clsx package.

But since we implement classNames ourself instead of import another package, I suppose it's not a big deal.

[Jokcy]

@danilowoz Any plan to merge this PR?

[danilowoz]

As I will be off for a couple of weeks, I don't want to introduce any disruptive change. Let's get this done as soon as I am back.