feat(rome_playground): add support for source type
MODIFY
Cargo.lock
Cargo.lock
@@ -1389,6 +1389,10 @@ dependencies = [
"rome_fs",
]
+[[package]]
+name = "rome_css_syntax"
+version = "0.1.0"
+
[[package]]
name = "rome_diagnostics"
version = "0.2.0"

MODIFY
crates/rome_playground/src/App.tsx
crates/rome_playground/src/App.tsx
@@ -8,7 +8,7 @@ import prettier from "prettier";
import parserBabel from "prettier/esm/parser-babel";
import IndentStyleSelect from "./IndentStyleSelect";
import LineWidthInput from "./LineWidthInput";
-import { IndentStyle } from "./types";
+import {IndentStyle, SourceType} from "./types";
import SourceTypeSelect from "./SourceTypeSelect";
enum LoadingState { Loading, Success, Error }
@@ -76,15 +76,18 @@ function App() {
searchParams.get("typescript") === "true",
);
const [isJsx, setIsJsx] = useState(searchParams.get("jsx") === "true");
+ const [sourceType, setSourceType] = useState(
+ (searchParams.get("sourceType") as SourceType) ?? SourceType.Module,
+ );
const language = getLanguage(isJsx, isTypeScript);
useEffect(
() => {
- const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?lineWidth=${lineWidth}&indentStyle=${indentStyle}&indentWidth=${indentWidth}&typescript=${isTypeScript}&jsx=${isJsx}#${encodeCode(code)}`;
+ const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?lineWidth=${lineWidth}&indentStyle=${indentStyle}&indentWidth=${indentWidth}&typescript=${isTypeScript}&jsx=${isJsx}&sourceType=${sourceType}#${encodeCode(code)}`;
window.history.pushState({ path: url }, "", url);
},
- [lineWidth, indentStyle, indentWidth, code, isTypeScript, isJsx],
+ [lineWidth, indentStyle, indentWidth, code, isTypeScript, isJsx, sourceType],
);
switch (loadingState) {
@@ -103,6 +106,7 @@ function App() {
indentStyle === IndentStyle.Space ? indentWidth : undefined,
isTypeScript,
isJsx,
+ sourceType
);
return (
@@ -121,6 +125,8 @@ function App() {
setIsTypeScript={setIsTypeScript}
isJsx={isJsx}
setIsJsx={setIsJsx}
+ sourceType={sourceType}
+ setSourceType={setSourceType}
/>
</div>
<div className="box-border flex h-screen divide-x divide-slate-300">

MODIFY
crates/rome_playground/src/SourceTypeSelect.tsx
crates/rome_playground/src/SourceTypeSelect.tsx
+import { SourceType } from "./types";
+
interface Props {
- setIsTypeScript: (b: boolean) => void,
- isTypeScript: boolean,
- setIsJsx: (b: boolean) => void,
- isJsx: boolean,
+ setIsTypeScript: (b: boolean) => void;
+ isTypeScript: boolean;
+ setIsJsx: (b: boolean) => void;
+ isJsx: boolean;
+ setSourceType: (v: SourceType) => void;
+ sourceType: SourceType;
}
-export default function SourceTypeSelect(
- { setIsTypeScript, isTypeScript, setIsJsx, isJsx }: Props,
-) {
+export default function SourceTypeSelect({
+ setIsTypeScript,
+ isTypeScript,
+ setIsJsx,
+ isJsx,
+ setSourceType,
+ sourceType,
+}: Props) {
return (
- <div className="pl-6 pb-5">
+ <div className="pl-5 pb-5">
<fieldset className="space-y-5">
<legend className="sr-only">File Type</legend>
+
+ <div className="relative flex items-start">
+ <div className="">
+ <label
+ htmlFor="sourceType"
+ className="block text-sm font-medium text-gray-700"
+ >
+ Source type:
+ </label>
+ <span id="source-type-description" className="text-gray-500">
+ <span className="sr-only">Source type</span>
+ </span>
+ <select
+ id="sourceType"
+ aria-describedby="source-type-description"
+ name="sourceType"
+ value={sourceType ?? ""}
+ onChange={(e) => setSourceType(e.target.value as SourceType)}
+ className="w-[100px] mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+ >
+ <option value={SourceType.Module}>Module</option>
+ <option value={SourceType.Script}>Script</option>
+ </select>
+ </div>
+ </div>
+
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
@@ -20,8 +55,13 @@ export default function SourceTypeSelect(
name="typescript"
type="checkbox"
checked={isTypeScript}
- onChange={(e) => setIsTypeScript(e.target.checked)}
- className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+ onChange={(e) => {
+ setIsTypeScript(false);
+ setIsJsx(false);
+ setIsTypeScript(e.target.checked);
+ }}
+ className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded disabled:opacity-30"
+ disabled={sourceType == SourceType.Script}
/>
</div>
<div className="ml-3 text-sm">
@@ -42,7 +82,8 @@ export default function SourceTypeSelect(
type="checkbox"
checked={isJsx}
onChange={(e) => setIsJsx(e.target.checked)}
- className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+ className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded disabled:opacity-30"
+ disabled={sourceType == SourceType.Script}
/>
</div>
<div className="ml-3 text-sm">

MODIFY
crates/rome_playground/src/lib.rs
crates/rome_playground/src/lib.rs
@@ -4,7 +4,7 @@ use rome_diagnostics::file::SimpleFiles;
use rome_diagnostics::termcolor::{ColorSpec, WriteColor};
use rome_diagnostics::{Formatter as ErrorFormatter, LongFormatter};
use rome_js_formatter::{format as format_code, to_format_element, FormatOptions, IndentStyle};
-use rome_js_parser::{parse, SourceType};
+use rome_js_parser::{parse, LanguageVariant, SourceType};
use std::io;
use wasm_bindgen::prelude::*;
@@ -78,15 +78,25 @@ pub fn run(
indent_width: Option<u8>, // If None, we use tabs
is_typescript: bool,
is_jsx: bool,
+ source_type: String,
) -> PlaygroundResult {
let mut simple_files = SimpleFiles::new();
let main_file_id = simple_files.add("main.js".to_string(), code.clone());
- let source_type = match (is_typescript, is_jsx) {
- (true, true) => SourceType::tsx(),
- (true, false) => SourceType::ts(),
- (false, true) => SourceType::jsx(),
- (false, false) => SourceType::js_module(),
+ let source_type = if source_type == "script" {
+ SourceType::js_script()
+ } else {
+ let source_type = if is_typescript {
+ SourceType::ts()
+ } else {
+ SourceType::js_module()
+ };
+
+ if is_jsx {
+ source_type.with_variant(LanguageVariant::Jsx)
+ } else {
+ source_type
+ }
};
let parse = parse(&code, main_file_id, source_type);

MODIFY
crates/rome_playground/src/types.ts
crates/rome_playground/src/types.ts
export enum IndentStyle { Tab = "tab", Space = "space" }
+export enum SourceType { Module = "module", Script = "script" }

feat(rome_playground): add support for source type (#2353)