Detect TypeScript in InertiaPageGenerator

[mondesirm]

I'm using React with TypeScript and I've been renaming .jsx to .tsx files a lot so this would help a lot when dealing with several views.

I tried to do something for Vue and Svelte as well, but I couldn't manage to properly mock the additional Filesystem calls in InertiaPageGeneratorTest : I kept encountering this confusing message.

[mondesirm]

The following changes worked for me (I commented them):

InertiaPageGenerator.php

protected function getAdapter(): ?array
{
    $packagePath = base_path('package.json');

    if (!$this->filesystem->exists($packagePath)) {
        return null;
    }

    $contents = $this->filesystem->get($packagePath);

    if (preg_match('/@inertiajs\/(vue3|react|svelte)/i', $contents, $matches)) {
        $adapterKey = strtolower($matches[1]);

        // Moved logic to new method
        if ($adapterKey === 'react' && $this->usesTypeScript()) {
            $adapterKey .= 'ts';
        }

        return $this->adapters[$adapterKey] ?? null;
    }

    return null;
}

    protected function populateStub(string $stub, InertiaStatement $inertiaStatement): string
    {
        $data = $inertiaStatement->data();
        $props = $this->adapter['framework'] === 'vue' ? json_encode($data) : '{ ' . implode(', ', $data) . ' }';
        $componentName = $this->adapter['framework'] === 'react' ? Str::afterLast($inertiaStatement->view(), '/') : null;

        // Vue and Svelte just needs a lang attribute in the script tag
        if (in_array($this->adapter['framework'], ['vue', 'svelte']) && $this->usesTypeScript()) {
            $stub = Str::replaceFirst('>', ' lang="ts">', $stub);
        }

        return str_replace([
            '{{ componentName }}',
            '{{ props }}',
            '{{ view }}',
        ], [
            $componentName,
            $props,
            str_replace('/', ' ', $inertiaStatement->view()),
        ], $stub);
    }

    // Checks for package and config file
    public function usesTypeScript(): bool
    {
        $packagePath = base_path('package.json');
        $tsConfigPath = base_path('tsconfig.json');
        $contents = $this->filesystem->get($packagePath);

        return $this->filesystem->exists($tsConfigPath) || preg_match('/"typescript"/i', $contents);
    }

[jasonmccreary]

@mondesirm, sorry for the delay here. I admittedly don't do a lot of JS. So I'm curious if Typescript extensions may be needed for the other frontends (e.g. Svelte, Vue, etc)?

[mondesirm]

@jasonmccreary Among those 3 JS frameworks, only React uses a different extension for their views (.tsx). Vue and Svelte only need the lang=ts present (already handled in the second code block).

I didn't feel necessary to include them but Angular uses .ts by default and Next uses .tsx as well like React.

I figured this change would really be time-saving for JS devs who decide to adopt Laravel's starter kits.

[jasonmccreary]

@mondesirm, thanks. Merged.