diff --git a/package-lock.json b/package-lock.json index f3b22b2..3c4e38f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ng2react/core", - "version": "1.6.1", + "version": "1.7.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ng2react/core", - "version": "1.6.1", + "version": "1.7.0", "license": "ISC", "dependencies": { "lodash": "^4.17.21", diff --git a/package.json b/package.json index bcab90f..11ecba3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ng2react/core", - "version": "1.6.1", + "version": "1.7.0", "description": "Convert AngularJS 1.x components to React components", "main": "./dist/cjs/api/main.js", "module": "./dist/esm/api/main.js", diff --git a/src/assets/prompt_base.md b/src/assets/prompt_base.md index 28ac6be..fbc830e 100644 --- a/src/assets/prompt_base.md +++ b/src/assets/prompt_base.md @@ -7,7 +7,7 @@ I want you to convert an AngularJS component into a functional React component. - The code: - So that I can programmatically find your code, please top and tail it with `// ___NG2R_START___` and `// ___NG2R_END___`, - - Your code should be written in ${LANGUAGE} + - Your code should be written in ${LANGUAGE}${ADDITIONA_CODE_INSTRUCTIONS} - Below the code: - list any potential issues you have identified @@ -49,5 +49,7 @@ const MyComponent = ({myProp, children}) => { ) } +export default MyComponent + // ___NG2R_END___ ``` diff --git a/src/assets/prompt_patterns.md b/src/assets/prompt_patterns.md index bfa08d2..2cda63d 100644 --- a/src/assets/prompt_patterns.md +++ b/src/assets/prompt_patterns.md @@ -10,8 +10,12 @@ I want you to deal with certain code patterns in a specific way. Here are the pa ### Example Response: -```jsx -const StateBindingExample = ({twoWayBinding, onTwoWayBindingChange}) => { +```tsx +type Props = { + twoWayBinding: boolean + onTwoWayBindingChange: (newValue: boolean) => void +} +const StateBindingExample = ({twoWayBinding, onTwoWayBindingChange}: Props) => { const handleTwoWayBindingChange = (e) => { onTwoWayBindingChange(e.target.checked) } @@ -24,6 +28,7 @@ const StateBindingExample = ({twoWayBinding, onTwoWayBindingChange}) => { ) } +export default StateBindingExample ``` ## Pattern 2: One-way bindings / String Bindings @@ -62,6 +67,7 @@ const StateBindingExample = ({oneWayBinding: initialOneWayBinding, readOnlyOneWa ) } +export default StateBindingExample ``` ## Pattern 3: Service Injection @@ -84,6 +90,7 @@ const ServiceInjectionExample = ({}) => { return <>... } +export default ServiceInjectionExample ``` ## Pattern 4: Require Controller @@ -103,6 +110,7 @@ angular.module('myApp').component('myComponent', { const RequireControllerExample = ({myController}) => { return <>... } +export default RequireControllerExample ``` ## Any other patterns diff --git a/src/lib/modules/openai-conversion/prompt-construction/gpt-prompt-builder.ts b/src/lib/modules/openai-conversion/prompt-construction/gpt-prompt-builder.ts index ca5dd3b..40b5a19 100644 --- a/src/lib/modules/openai-conversion/prompt-construction/gpt-prompt-builder.ts +++ b/src/lib/modules/openai-conversion/prompt-construction/gpt-prompt-builder.ts @@ -32,10 +32,19 @@ export function buildGptMessage( const [code, sourceLanguage] = buildCode('component', component, sourceRoot, template, controller) const language = (targetLanguage ?? sourceLanguage) === 'typescript' ? 'Typescript' : 'JavaScript' + const additionalCodeInstructions = + language === 'Typescript' ? '\n - If props are used, please define the prop types' : '' + return [ { role: 'user', - content: preparePrompt(PROMPT_BASE.replace('${LANGUAGE}', language), { language }), + content: preparePrompt( + PROMPT_BASE.replace('${LANGUAGE}', language).replace( + '${ADDITIONA_CODE_INSTRUCTIONS}', + additionalCodeInstructions + ), + { language } + ), }, { role: 'user', diff --git a/src/test/openai-conversion/gpt-prompt-builder.spec.ts b/src/test/openai-conversion/gpt-prompt-builder.spec.ts index 8bd6ec3..0f0cde6 100644 --- a/src/test/openai-conversion/gpt-prompt-builder.spec.ts +++ b/src/test/openai-conversion/gpt-prompt-builder.spec.ts @@ -65,9 +65,9 @@ describe('Given a source file that has a JavaScript extension', () => { expect(prompt).toContain('- Your code should be written in JavaScript') }) - it('Then the prompt should contain tsx examples', () => { + it('Then the prompt should contain tsx and jsx examples', () => { expect(prompt).toContain('```jsx') - expect(prompt).not.toContain('```tsx') + expect(prompt).toContain('```tsx') }) }) @@ -112,8 +112,8 @@ describe('Given a source file that has a Typescript extension But JavaScript was expect(prompt).toContain('- Your code should be written in JavaScript') }) - it('Then the prompt should contain tsx examples', () => { + it('Then the prompt should contain tsx and jsx examples', () => { expect(prompt).toContain('```jsx') - expect(prompt).not.toContain('```tsx') + expect(prompt).toContain('```tsx') }) })